Clearfix

clearfix hack 是一种包含浮动的流行方式(N. Gallagher aka @necolas)

不要与 clear 属性混淆,clearfix 是一个概念 (也与浮点数有关,因此可能存在混淆)。要包含浮点数,你需要在容器( 级)上添加 .cf.clearfix 类,并使用下面描述的一些规则设置此类的样式。

3 个版本的效果略有不同(来源: N.Gallagher 发布的新的 microfix 修复版和 TJ Koblentz 重新加载的 clearfix):

Clearfix(包含浮动的顶部边缘折叠仍然发生)

.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

Clearfix 还可以防止包含浮动的顶部边缘折叠

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

Clearfix 支持过时的浏览器 IE6 和 IE7

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Codepen 显示 clearfix 效果

其他资源: 你所知道的关于 clearfix 的一切都是错误的 (clearfix 和 BFC - 块格式化上下文,而 hasLayout 与过时的浏览器 IE6 可能相关 7)