Clearfix

确保元素自动清除其子元素。

• 使用::after伪元素，并应用content: ''使其影响布局。
• 使用clear: both使元素清除左浮动和右浮动。
• 为了使这种技术正常工作，请确保容器中没有非浮动的子元素，并且在同一格式化上下文中没有高浮动的容器（例如浮动列）。

[!NOTE]

只有在使用float构建布局时才有用。考虑使用更现代的方法，如flexbox或grid布局。

<div class="clearfix">
  <div class="floated">浮动 a</div>
  <div class="floated">浮动 b</div>
  <div class="floated">浮动 c</div>
</div>

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.floated {
  float: left;
  padding: 4px;
}