如何清除浮动（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;
}