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）