CSS 布局 如何清除浮动

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

注意:只有当您仍然使用浮动来构建布局时，这才是有用的。请考虑使用一种现代的方法与柔性盒布局或网格布局。

HTML

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

CSS

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

说明

• .clearfix::after 定义伪元素。
• content: '' 允许伪元素影响布局。
• clear: both 指示元素的左侧、右侧或两侧不能与同一块格式上下文中较早浮动的元素相邻。

为了使此代码段正常工作，您需要确保容器中没有非浮动子级，并且clearfixed容器之前没有高浮动，但格式上下文相同(例如浮动列)。