清除浮动的方式以及各自的优点、缺点

清除浮动的方式以及各自的优点

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

.clear:after{
content:"";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden
}

o 优点：符合闭合浮动思想，结构语义化正确
o 缺点：ie6-7 不支持伪元素：after，使用 zoom：1 触发 hasLayout