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

Question

我有三个浮动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 */

Answer 1

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

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

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