浮点数的 clearfix 在 CSS 中做了什么

在 CSS 中，浮点数是一种常用的布局方式，它可以让 HTML 元素脱离文档流，实现自由的排列。但是，浮动元素的脱离流造成了一些问题，如父元素高度不被自动撑开、与浮动元素同级的元素遮盖等问题。这时，我们就需要使用清除浮动（clearfix）来解决这些问题。

什么是 clearfix？

clearfix 是一种让浮动元素在容器中正确排列的方法，是指在浮动元素后面添加一个具有清除浮动效果的元素，使得浮动元素不会影响到容器的高度和宽度。

如何实现 clearfix？

在 CSS 中，clearfix 的实现方式有很多，其中比较常用的是通过给容器添加一个伪元素来清除浮动。

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

这段代码中，clearfix 是容器的类名，::after 是伪元素选择器，content: "" 表示该元素无实际内容，display: table 表示该元素以表格的方式显示，clear: both 表示清除浮动。通过将伪元素插入到容器的末尾，就可以实现清除浮动的效果。

如何使用 clearfix？

使用 clearfix 很简单，只需要给需要清除浮动的容器添加 clearfix 类名即可。

<div class="container clearfix">
  <div class="float-left"></div>
  <div class="float-left"></div>
  <div class="clearfix"></div>
</div>

在上面的例子中，float-left 是对两个元素设置的浮动样式，clearfix 则是对容器设置的清除浮动样式。在最后面添加 clearfix 元素，可以保证容器的高度被正确计算，并且不会被浮动元素遮盖。

总结

通过使用 clearfix，可以解决浮动元素带来的一系列问题，如容器高度无法自适应、浮动元素遮盖等问题。虽然实现方式多种多样，但是通过给容器添加伪元素清除浮动是比较常用的一种方式。在编写 CSS 样式时，我们需要注意清除浮动的位置、清除效果的实现方法，以免造成不必要的麻烦。