CSS clearfix 用于带有显示表的浮动并清除两者

在使用浮动布局时，常常会遇到浮动元素高度小于容器高度，导致容器高度塌陷，影响布局美观和实际场景。此时需要使用 clearfix 清除浮动产生的影响，以保证布局的稳定和美观。

什么是 clearfix

clearfix 是一种 CSS 清除浮动的技术，其实现方式包括添加伪元素、添加空标签以及使用 overflow 属性等多种方法。其中最为常用和推崇的方式是添加伪元素 clearfix。

clearfix 通过为父元素添加一个伪元素，并为该伪元素设置 clear:both，从而保证父元素能够正常包含浮动元素的高度和宽度。

如何实现 clearfix

在 CSS 中实现 clearfix 可以通过如下代码：

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

这段代码中，我们为父元素添加了一个伪元素 clearfix，设置该元素的 content 为空、display 为 table，并设置 clear 为 both，即清除浮动。这样一来，父元素就能完美地包含该容器内的所有浮动元素。

在带有显示表的浮动中使用 clearfix

在实际场景中，经常会使用显示表布局。当浮动元素和显示表元素同时出现时，我们需要对 clearfix 进行一些微调，以维持布局的美观和稳定。

<div class="wrapper clearfix">
  <div class="floating-box"></div>
  <div class="table-box"></div>
</div>

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.table-box {
  overflow: hidden;
}

在这里，我们同时使用了 clearfix 和 overflow:hidden 两种技术来实现浮动元素和显示表元素的布局，即通过为 table-box 设置 overflow:hidden 来清除浮动。

总结

通过使用 clearfix 技术，我们能够有效地清除浮动元素带来的影响，在布局设计和实现中起到重要作用。在具体使用过程中，需要根据实际情况进行微调和优化，以达到最佳效果。