Clearfix - CSS 是什么？

当一个元素内部有一个浮动元素时，该元素的高度会倒塌（collapse），因此周围的元素可能会受到影响。解决该问题的方法之一是使用 Clearfix - CSS。

Clearfix - CSS 是一种技术，它通过可以清除浮动引起的问题。它实质上是一种解决了浮动引起无法撑起父级元素高度的方法。它可以防止元素周围的浮动元素所造成的异常布局情况。

Clearfix - CSS 的作用？

当一个元素中包含浮动元素时，元素没有设置固定高度，那么该元素就会遭受高度倒塌的问题。这时候，如果你想让该元素完全展示出来，你可以使用CSS伪元素 clearfix。

具体实现方法为：在父元素的 CSS 代码中添加 ::after 的伪元素，然后在 ::after 中添加 clear: both; 属性。这样就可以清除浮动元素造成的影响，使父级元素能够撑起来。

.parent::after {
  content: "";
  display: block;
  clear: both;
}

至此，Clearfix - CSS 就应用到了该元素中，可以完美撑起其高度。

总结

以上就是 Clearfix - CSS 的基本介绍和作用。使用 Clearfix - CSS 有助于解决浮动元素造成的异常布局问题，确保网页展示正常。