CSS SNIPPET

  返回

清理浮动  页面布局

为子元素自动清理浮动。

Note: 这个方法仅适用于你还在使用浮动布局。请考虑使用现代方法

如flexbox布局或栅格布局。

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;
}
效果演示
float a
float b
float c
代码说明
  1. .clearfix::after 定义一个伪元素。
  2. content: '' 让伪元素可以影响布局。
  3. clear: both 声明元素的左右都不可以与同块内之前的浮动元素相邻
浏览器支持

100.0%

⚠️ 这个代码段正确工作的前提是,在容器内只能包含浮动子元素,并且 在容器前没有高的浮动元素。