html - 带有伪元素的 float 元素后的clearfix

Question

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

如何编写正确的 clearfix？

这是一个 fiddle :

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”适用于该元素内的 float ，旨在防止元素因 float 而“折叠”。

这里你不需要 clearfix。您只是想正常清除 float 。一个简单的 clear: left 或 clear: both 就足够了。