使用伪元素浮动元素后的clearfix

时间:2014-07-30 14:27:36

标签: html css clearfix

我有三个浮动div容器,但我在其他网站上找到的clear-fix-solutions不起作用。我想我做错了什么但不知道是什么。

如何撰写正确的clearfix

这是一个小提琴:

http://jsfiddle.net/h23A5/

HTML:

<div class="box"></div> 
<div class="box"></div> 
<div class="box nomargin clearfix"></div>

和CSS:

.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

1 个答案:

答案 0 :(得分:2)

元素上的“clearfix”适用于该元素中的浮点数,旨在防止元素因浮动而“崩溃”。

这里不需要clearfix。你只是想通常清理浮子。

表示浮动元素后面的元素上的简单clear: leftclear: both就足够了。