‘壹’ css的clear属性
clear 属性规定元素的哪一侧不允许其他浮动元素
在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下
<html>
<head>
<style type="text/css">
img
{
float:left;
clear:both;
}
</style>
</head>
<body>
< img src="1.png" />
< img src="2.png" />
</body>
</html>
‘贰’ web前端必备英语词汇都在这儿了，客官你了解多少
appendChild 放置到某元素最后
attribute 属性
addEventListener 添加侦听器
assign 赋值
alert 弹出框
append 添加
appendTo 添加到
absolute 绝对的
active 活动的，激活的，标记的一个伪类
align 对齐
alpha 透明度，半透明anchor 锚记标记是这个单词的缩写
anchor 锚记<a>标记是这个单词的缩写
arrow 箭头
auto 自动
appName 程序名
appCodeName 程序代号
appVersion 程序版本
appAgent 程序代理
abs 取绝对值
array 数组
back 超过范围的三次方缓动
bounce 指数衰减的反弹缓动
before 在...之前
blur 当输入框失焦的时候触发
BOM 全称Browser Object Model 浏览器对象模型
blur 失焦
bind 绑定
background 背景border 边框
border 边框
banner 页面上的一个横条both 二者都是clear 属性的一个属性值
both 二者都是clear 属性的一个属性值
black 黑色
bottom 底部，是一个CSS 属性
blink 闪烁
box 盒子
block 块
br 换行标记
blue 蓝色
bug 软件程序中的错误
body 主体，一个HTML 标记
building 建立
bold 粗体
button 按钮
break 中断
bool 布尔
boolean 布尔
bubble 冒泡
cubic 三次方的缓动
circular 圆形曲线的缓动
chain 当执行一种缓动效果后可以继续使用另一个缓动效果
createElement 创建新元素
createTextNode 创建文本节点
childNodes 返回子节点
cancelBubble 删除冒泡
click 点击事件
change 内容发生改变，并失焦后才触发该事件
contextmenu 右击事件
clientX 光标相对于该网页的水平位置
clientY 光标相对于该网页的垂直位置
close 关闭当前页面
confirm 输入框
clientWidth 获取元素宽度
clientHeight 获取元素的高度
childNodes� 获取所有子节点�
children 返回子元素
cloneNode 复制节点
Clone 克隆、复制
chekbox 复选框
cell 表格的单元格
color 颜色
center 中间，居中
connected 连接的
contact 联系
child 孩子
content 内容
circle 圆圈
crosshair 十字叉丝
class 类别
css 层叠样式表
clear 清除
cursor 鼠标指针
cm 厘米
centimeter 厘米
continue 继续
close 关闭
ceil 向上取整
charAt 获取某位置字符
DOM 全称Document Object Model 文档对象模型
default 不执行
DOMMouseScroll 在火狐浏览器中的滚轮事件
document 文件，文档
dbclick 双击
dashed 虚线
display 显示，CSS 的一个属
decimal 十进制
division 分区，div 就是这个单词的缩写
decoration 装饰
document 文档
default 默认的
definition 定义
dotted 点线
double 双线
design 设计
do 做
exponential 指数曲线的缓动
elastic 指数衰减的正弦曲线缓动
error 错误 过失
element 元素
else 否则
focus 当输入框聚焦的时候触发
firstChild 第一个子节点
firstElementChild 返回第一个标签节点
function() 函数
father 父亲
float 浮动
filter 滤镜，过滤器
font 字体
first 第一个
for 在循环语句中的一个保留字
fixed 固定的
four 4 个
function函数，功能
getAttribute 获取属性
getElementsByClassName 根据class标签获取元素
getElementsByName� 通过元素的Name属性值
getElementById� 通过元素Id，唯一性
getElementsByTagName 通过标签名查找元素
gif 一种图像格式
green 绿色
gray 灰色
history 对象
host 主机
height 高度
hover 盘旋;徘徊;犹豫
hidden() 隐藏
hack 常用于CSS 中的一些招数，或者类似于偏方的技巧
here 这里
hand 手
hidden 被隐藏
head 头部
home 首页
height 高度
horizontal 水平的
help 帮助
hover 鼠标指针经过时的效果，或称为“悬停状态”
input 当输入的时候实时触发
innerHeight 内部高度
innerWidth 内部宽度
in 从0开始加速的缓动
inOut 前半段从0开始加速，后半段减速到0的缓动
infinity 无线循环
insertBefore 插入到某元素前
image 图像
inline 行内
important 重要的
inner 内部的
indent 缩进
italic 意大利体，斜体
index 索引
if如果
int：整数
indexOf：判断某字符的首次位置
jpg 一种图像格式justify 两端对齐
justify 两端对齐
keyCode 按键编码
keydown 按下按键
keyup 按下按键抬起
linear 匀速
lastChild� 返回最后一个子节点
lastElementChild� 返回最后一个标签节点�
language 语言
line 线
last 最后一个
link 链接
left 左边
list 列表
length 长度
lowercase 小写
level 级别
mouseover 移动到元素上
mouseout 从元素上移开
mousemove 移动鼠标
mousewheel 在其他浏览器的滚轮事件
mousedown 鼠标按下事件
mouseup 鼠标抬起事件
margin 外边距
millimeter 毫米
max 最大的
min 最小的
medium 中间
model 模型
menu 菜单
move 移动
middle 中间
nextElementSibling 返回下一个兄弟元素
nextSibling 返回下一个兄弟节点
nextElementSibling� 下一个兄弟元素
nodeValue 节点值
nodeType 节点类型
nodeName 标签名称
navigation 导航
none 无，不，没有
new 新的
normal 标准
number 数字
null 空，空值
new 新建
outerHeight 整个高度
outerWIdth 整个宽度
open 打开新页面
onscroll 窗口滚动事件
onresize 窗口大小监听事件
onload 图片加载事件
offsetLeft 获取元素距离左侧的距离�
offsetTop 获取元素距离顶部的距离
offsetWidth 获取元素自身宽度
offsetHeigh 获取元素自身高度�
onload 在装载时
onclick 在点击时
ondblclick 在双击时
onmouseover 在鼠标进入时
onmouseout 在鼠标离开时
onmousemove 在鼠标移动时
onmousedown 在鼠标按下时
onmouseup 在鼠标抬起时
onkeydown 在按键按下时
onkeyup在按键抬起时
onkeypress 在按键时
onsubmit 在提交时
onchange 在改变时
onfocus 在获得焦点时
onblur 在失去焦点时
onscroll 窗口滚动事件
onresize 窗口大小监听事件
out 减速到0的缓动
onStart 开始事件
onComplete 完成事件
onStop 停止事件
onUpdate 更新事件
object 对象
optional 可选的
oblique 一种斜体
orange 橙色
one 一个
outer 外面的
only 仅仅
overflow 溢出
open 打开
previous 前一个
prevent 阻止
pageX 光标相对于该网页的水平位置
pageY 光标相对于该网页的垂直位置
port 端口
protocol 协议
prompt 提示框
parentNode 返回父级节点
parentElementNode 获取已知节点的父节点
previousSibling 返回上一个兄弟节点
previousElementSibling 返回上一个兄弟元素
password 密码
position 位置
prepend 预先
padding 内边距
progress 进度
point 点
public 公开的
pointer 指针，指示器
purple 紫色
position 定位，位置
pop 弹出
push 压入
open 打开
option 选项
quadratic 二次方的缓动
quintic 五次方的缓动
quartic 四次方的缓动
querySelector 根据标签名获取第一个元素
querySelectorAll 获取所有标签名的元素
repeat 次数
remove 删除当前节点
replaceChild 替换节点
removeEventListener 取消侦听器
reload 刷新
removeAttribute 删除属性
removeChild 删除父节点的某个子节点
radio 视频
red 红色
resize 重新设置大小
relative 相对的
right 右边
repeat 重复，平铺
row 行
replacement替换
return 返回
random 随机
round 取整
sinusoidal 正弦曲线的缓动
start 开始
stop 停止
setinterval 时间函数
sibling 兄弟
scrollTop 获取文档滚动高度
screenX 光标相对于该屏幕的水平位置
screenY 光标相对于该屏幕的垂直位置
setAttribute 设置属性
scrollHeight 获取文档整体高度
scrollTop 获取文档滚动高度
scrollLeft 元素左边界
setAttribute 设置节点上的属性
submit 提交
scroll 滚动
shadow 阴影
silver 银色
special 特殊的
size 尺寸
square 方块
solid 固体，实线
static 静态的
solution 方案
strong 强壮，加粗的
son 儿子
style 样式
span 一个HTML 标记
switch 切换
setInterval 设置反复性定时器
setTimeout 设置一次性定时器
srcElement 源对象，事件源
split 分割
substr 截取字符串
substring 截取字符串
sqrt 取开方
status 状态
sort 排序
slice 切片，划分
splice 铰接，粘接
textContent 文本添加文字
table 表格
title 标题
td 单元格的HTML 标记
top 顶部
toLowerCase 转换为小写
toUpperCase 转换为大写
text 文本
tr 表格中“行”的HTML 标记
thick 粗的
transitional 过渡的
thin 细的
two 两个
three 三个
type 类型
through 穿过
this 这个，当前
typeof 类型
underline 下划线
uppercase 大写
upper 上面的
url 网址
vertical 竖直的
visited 访问过的
var 定义变量
wrap 包裹
window 窗口
white 白色
width 宽度
while 当...的时候
write 写入
yellow 黄色
‘叁’ web前端工程师工作中遇到难以解决的问题
1）.margin-top,margin-bottom不能正常显示时
一.有时会遇到外层中的子层使用margin-top不管用的情况；这里我们需要在子层的前后加上一个
div{height:0;overflow:hidden;}
例
CSS样式表中：
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解决方法：在P标签前后各加2个空的div：<divstyle="height:0;overflow:hidden"></div>
二.网页中头部，中部，底部的居底部有时给个margin-bottom:10px;不管用也是要给个清除属性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加个<div></div>
2）.div层中高度自适应问题
网页前端科技人员在设计网页时不可能知道客户在要他们自己的网站内容页里加多少文字或图片内容
这时我们就不能规定div层的高度，为此应写成min-height:200px;height:auto!important;height:
200px;overflow:visible;这样ie7,ff,ie6浏览器的高度自适应问题就解决了，这些在
http://www.xueshengshu.com/网站中用到最多了。
3）.div层中子层的居底部对齐问题
div中的定位问题有很多也很麻烦，但弄懂了就OK了，在一个大的div层中如何让子层的内容居底部
对齐就涉及到了position定位问题；
例
div层#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
div子层#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
100px},最近写的网站中http://www.msgc.net.cn/就用到了
4）.div层中清除clear属性的一小部分应用
在div中一个大的层里面有很多子层，若是加上边框在ie7、ie6中或许会正常显示，但是在ff中可能
只会成一条线了，此时在最外层的后面加上<div style="clear:both"></div>或者设 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}后在每个浮动外框调用wrapfix；http://www.xueshengshu.com学生书网里用到最多了。
5）.解决IE8下div移位、错位等兼容性问题
在<head>标签后面的第一句话加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
6）.单行文字居中与字体样式问题
在div中一个层中只有一行文字，要让这层中的文字居中，可设line-height的高度和层的高度一样，注意这一层中的文字不能换行，此外，设了line-height时再给定字体样式font:bold 14px "宋体";这时要把font:bold 14px "宋体";放在line-height的前面，否则字体样式不显示文字也不居中；或者将font:bold 14px "宋体";改成font-size:16px;font-weight:bold;font-family:"宋体";就OK了。
7）.鼠标滑上去的特殊效果
往往为了达到显眼的效果，我们会写到一些好看的效果，方法一在样式表中写：ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul标签中调用即可方法二：在样式表中写上：.hover img{filter:alpha(opacity=40);}在div中调用onmouseover="this.className='hover'"onmouseout="this.className=this.classtype"即可
8）.IE6中高度不对问题
今天在div中给定了高度为1px,其它浏览器显示正常，可是ie6中显示的高度就不对了，这时我给样式表中加了个font-size:0px;line-height:0px;就好了
9）.ul在外框里margin-top不起作用的问题
在div大框子里用了ul作导航的时候为了合ul层居中显示，设ul的样式表为margin-top:-15px不起作用了，此时应该将div大框设定高度后给个line-height与height一样的高度，ul层就自动居中了。
例如http://www.hopes-home.cn/main.aspx
10）.ff中margin-top有时不起作用的问题
今天头晕脑涨的把这问题给解决了，这几天写标网都有累似问题，可是一直都是换个写法解决的，今天的这个办法也不只可行试试还是可以的，在一个div外框层中给个宽度例如，#div_wrap{width:280px;height:100%;}
其次在这个框子里设一个.div_top{widh:100%;font:bold12px "宋体";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
最后在这个div_center里套个ul li时经常会在ff中出问题，也就是在div_top与div_center中莫名的多了几个像素的空格，这时给ul样式表设个display:inline-table即可；
‘肆’ CSS规则"clear: both"有什么作用
clear属性用来指定的浮动元件不允许浮动该哪一侧；它设置或返回元素相对于浮动对象的位置。而"clear: both"用于设置在左右两侧均不允许浮动元素。
原文地址： CSS规则"clear: both"有什么作用？
当不需要与指定元素相关的任何元素在左右浮动，并且仅在下面显示时，就可以使用该"clear: both"规则。该规则还表明没有其他元素占用左右两边的空间。
语法：
示例：
效果图：
浏览器支持：
●Google Chrome
●Internet Explorer
●Firefox
●Opera
●Safari
推荐阅读：
java基础教程
layui框架
go语言教程
‘伍’ css中clear属性是什么意思
clear 属性规定元素的哪一侧不允许其他浮动元素。
clear有四个属性值，分别是left（在左侧不允许浮动元素）、right（在右侧不允许浮动元素）、both（在左右两侧均不允许浮动元素）、none（默认值。允许浮动元素出现在两侧）、inherit（规定应该从父元素继承 clear 属性的值）。
‘陆’ HTML的float与clear问题
float 属性定义元素在哪个方向浮动。
其属性有：
float：left；
float：right；
float：none；
float：inherit；
--------------------------------
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
-------------------------------------------------------------
clear 属性定义了元素的哪边上不允许出现浮动元素。
其属性有：
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
‘柒’ html的clear both含义
clear:both在css里是清除左右两边浮动的意思。
如果前面的DIV盒子里用到了浮动，那么在编写下一个DIV盒子之前，应该在前面加上<div style="clear:both"></div>，这样才能清除掉前面DIV盒子浮动带来的影响。
clear属性值：
left 清除该元素 左边的浮动元素。俗一点就是说谁设置了clear：left属性，谁的左边就不允许存在浮动的元素
right 清除该元素 右边的浮动元素。俗一点就是说谁设置了clear：right属性，谁的右边就不允许存在浮动的元素
both清除两边的浮动 ，清除该元素 左右边的浮动元素。俗一点就是说谁设置了clear：both属性，谁的左右边 都不允许存在浮动的元素
none，就是不做任何处理，不清除任意一边的浮动元素
inherit，就是让它跟随父元素的属性值，父元素如何设置清除，它就如何设置清除。
(7)web中clear属性扩展阅读
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
CSS特点：
丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
‘捌’ clear属性不起作用，需要的效果是两个div都浮动，且各占一行
1、各占一行就别浮动，画蛇添足
2、非要浮动且各占一行，那就在他们中间加个div 设置clear:both就行了
你的代码中clear之所以不起作用是因为，加在本层中且clear：right了
‘玖’ clear属性怎么回事啊
是因为clear只清除使用clear上边的float效果。
如果想要在同一行 a b 都要用float，并且b不能用clear。
下边这个代码是我亲自手打并测试后的效果。
<html>
<head>
<style type="text/css">
.use_float{float:left;}
.float1{height:100px;width:100px; background:pink;}
.float2{height:150px;width:150px; background:blue;}
.float3{height:200px;width:200px; background:green;}
.float4{height:250px;width:250px; background:black;}
.float5{height:300px;width:300px; background:orange;}
.float6{height:350px;width:100px; background:#aeaeae;
float:right;}
.use_clear{ clear:left; /*-----把这里的left换成right试试-----*/ height:10px; width:100%; border:1px solid red; background:red;}
</style>
</head>
<body>
<div class="use_float float1"></div>
<div class="use_float float2"></div>
<div class="use_float float3"></div>
<div class="use_float float4"></div>
<div class="use_float float5"></div>
<div class="use_float float6"></div>
<!---------------------------------上边用float---------------------------->
<div class="use_clear"></div>
</body>
</html>