清除浮动的几种方法总结

(Updated: )
CSS
CSS, float

定义

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

— W3C

问题

因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。造成父元素高度塌缩。

解决

1. 添加空元素

live demo

1
2
3
.clear {
  clear: both;
}

缺点：添加了多余的空元素。

2. 浮动容器

live demo

1
2
3
.container {
  float: left;
}

缺点：下一个元素会受到这个浮动元素的影响。

3. 容器设置 overflow: auto

live demo

1
2
3
4
.container {
  <!-- overflow: hidden; 亦可 -->
  overflow: auto;
}

4. 容器设置 display: inline-block

live demo

1
2
3
.container {
  display: inline-block;
}

缺点：改变了容器的流。

5. 伪类清除

live demo

1
2
3
4
5
6
7
8
.clear::after {
  content: '';
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

6. 容器设置 display: flow-root

live demo

1
2
3
.container {
  display: flow-root;
}

缺点：浏览器兼容性较差。