Question

CSS中清除浮动为什么要写成这样，能否把期中的每一项解释一下？

.clear:after{
content:"";
height:0;
visibility:hidden;
display:block;
clear:both;
}
这段代码height设置为0了后为什么还要visibility:hidden;和display:block;，请能帮忙详细解释一下？

Answer 1

这一句是除了IE6、7用的。IE6、7是用.clearfix{*zoom:1;}（一般都是用.clearfix而不是.clear）
意思是在这个类的容器后面价格容器，容器没有内容，高度是0，visibility:hidden;表示他占了空间，并不是像display:none直接消失了，那样就不起作用了。display:block;是让他变快元素。clear:both;就是清除上面元素的浮动。
所以.clearfix一般写到要清除浮动元素的外面。
例如：
<div class="clearfix">
<span>左浮动</span>
<em>又浮动</em>
</div>

Answer 2

/*用after清除浮动，必须的是条件是*/
.clear:after{
    content:"";如果有内容就填写，如果没有内容就为空。
    display:block;或者display:inline-block;目的是为了设置宽高这些东西
    clear:both;或者left或者right根据自己实际情况来定。
    其它的都是可选项。
}

Answer 3

1；确保正确清除；
2；针对不同的浏览器和不同的浮动产生的问题；
3；这个好像是万能清除法。

Answer 4

清除浮动没有这么麻烦，反正我是没有这么写过