[分享]css中clreafix是什么意思

在讨论CSS时，经常会听到clearfix这个词，那么clearfix是什么意思呢？在HTML中，当一个元素包含另一个元素时，它们的高度会互相影响。如果子元素浮动（float），则父元素的高度会丢失，...

在讨论CSS时，经常会听到clearfix这个词，那么clearfix是什么意思呢？

在HTML中，当一个元素包含另一个元素时，它们的高度会互相影响。如果子元素浮动（float），则父元素的高度会丢失，导致布局混乱。clearfix是一种可以解决这类问题的技巧。

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

上面这段CSS代码展示了如何使用clearfix。"clearfix"是一个类名（也可以使用id名），::after是伪元素（pseudo-element）的一种，其可以在所选元素内容之前或之后插入生成的内容。这段代码在clearfix类下调用::after，为其添加一个空内容，并通过display设置其为块状元素，然后使用clear:both;清除浮动，使其父元素可以正确地包含子元素。

要使用clearfix，只需将其添加到需要clearfix的元素上。例如：

<div class="parent clearfix">
  <div class="child left"></div>
  <div class="child right"></div>
</div> 

在上述代码中，我们在父元素"parent"上添加clearfix类，并在其子元素中设置浮动，都不会导致布局混乱。