• 额外标签法(在最后一个浮动标签后,新加一个标签,给其设置 clear: both)不
推荐
o 优点:通俗易懂,方便
o 缺点:添加无意义标签,语义化差
• 父级添加 overflow 属性(overflow:hidden)不推荐
o 优点:代码简洁
o 缺点:内容增多的时候容易造成不会自动换行导致内容被隐蔽掉,无法显示要溢
出的元素
• 给父级设置高度
o 优点:简单,代码少,容易掌握
o 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级 div 不一
样时,会产生问题
• 父级 div 定义 overflow:auto(必须定义 width 或 zoom:1,同时不能定义 height,
使用 overflow:auto 时,浏览器会自动检查浮动区域的高度)
o 优点:简单,代码少,浏览器支持好
o 缺点:内部宽高超过父级 div 时,会出现滚动条。
• 使用 after 伪元素清除浮动(推荐使用)
.clear:after{
content:"";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden
}
o 优点:符合闭合浮动思想,结构语义化正确
o 缺点:ie6-7 不支持伪元素:after,使用 zoom:1 触发 hasLayou