CSS 清除浮动

区块元素如果没有指定高度，则高度默认为 auto，意味着该元素的高度会随着子元素所占据文档的空间而自动撑开。如果没有子元素，则该元素的高度为 0。如果该元素有子元素，但是所有子元素都进行了浮动，则该元素的高度也为 0。这是因为浮动意味着脱离文档流，也就是浮动的元素不会再占用文档的空间，因此如果一个元素的所有子元素都进行了浮动，则该元素的子元素所占用的空间为 0，因此该元素的高度为 0。

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

.container {
  border: 1px solid red;
}

.item {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f60;
}

但是大部分情况下，我们不希望得到这种效果，我们希望不管子元素是否浮动，外层元素的高度都会撑起来，就像下图所示这样。

通过以下几种情况，可以让外层元素的高度自动撑起来。

1. 为外层元素设置高度

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

.container {
  height: 200px;
  border: 1px solid red;
}

.item {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f60;
}

2. 添加一个空的子元素来清除浮动

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="clearfix"></div>
</div>

.container {
  border: 1px solid red;
}

.item {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f60;
}

.clearfix {
  clear: both;
}

3. 添加伪元素来清除浮动

<div class="container clearfix">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

.container {
  border: 1px solid red;
}

.item {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f60;
}

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

顺便说一下，伪类和伪元素的区别，伪类的格式：选择器:伪类，例如 li:first-child，a:hover。伪类添加的 CSS 规则仍然作用在选择器所代表的元素上，只不过只有在某种状态下，才会命中该选择器，例如 a:hover，只有在鼠标悬停在 <a> 标签上，才命中选择器。伪元素的格式：选择器::伪元素，例如 p::first-line，div::before。伪元素添加的 CSS 规则不是作用在选择器代表的元素上，而是作用在选择器代表的元素的某个抽象的子元素上，例如 p::first-line，会把段落的第一行抽象成 <p> 的子元素，然后把 CSS 规则应用在该子元素上。但是在使用伪元素时，所有的浏览器都可以使用一个冒号的形式 选择器:伪元素，但是这样是不规范的。

选择器::before 伪元素和 选择器::after 伪元素，会在选择器代表的元素中抽象出一个子元素，该子元素为该选择器代表的元素的 first-child 或 last-child，该子元素的内容由 content 属性指定。

4. 将外层元素设置为 BFC

BFC 可以包含浮动，还可以阻止垂直外边距（margin-top、margin-bottom）折叠。

只要元素满足下面任一条件即可触发 BFC 特性

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

<div class="container clearfix">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

.container {
  border: 1px solid red;
}

.item {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f60;
}

.clearfix {
  /* 这里也可以采取其他方式将容器变为 BFC，只不过 overflow: hidden 对其它元素的影响最小。 */
  overflow: hidden;
}

最佳方案

以下这种清除浮动的方式可以适用于各种浏览器，包括老版本的 IE 浏览器，并且对容器元素和其他元素的影响最小。

<div class="container clearfix">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

.container {
  overflow: hidden;
  border: 1px solid red;
}

.item {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f60;
}

.clearfix {
  *zoom: 1;
}

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

下面是 SASS 代码写的清除浮动的 mixin。

@mixin clearfix {
  *zoom: 1;
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.container {
  border: 1px solid red;
  @include clearfix;
}

.item {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f60;
}

参考

CSS清除浮动（Clear与BFC）
10 分钟理解 BFC 原理