如何清除浮動（Clearfix）

學習如何使用 clearfix 技巧清除浮動。

如何清除浮動 (Clearfix)

浮動元素后面的元素將圍繞其流動。使用 clearfix 破解來解決問題：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...

如果一個元素比包含它的元素高，并且它是浮動的，那么它將溢出其容器。

然后，我們可以向包含元素添加 overflow: auto; 來解決此問題：

.clearfix {
  overflow: auto;
}

只要您能夠控制外邊距和內邊距，overflow:auto 清除浮動的效果就很好（否則，您可能會看到滾動條）。

然而，新的、現代的 clearfix 技巧使用起來更安全，大多數網頁都使用以下代碼：

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}