Clearfix

Created: November-22, 2018

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）