CSS浮动和清除浮动

1 浮动简介

CSS浮动是指浮动元素会脱离“文档流”并向左或向右浮动，允许文本和内联元素环绕它，直到碰到父元素或者另一个浮动元素。

需要注意的是，在CSS定位中absolute绝对定位以及fixed固定定位属于完全脱离文档流，其位置即不受其他元素影响，也不会影响到其他元素。而CSS浮动属于半脱离文档流，因为文本和内联元素会环绕浮动元素，这个也是float浮动属性被设计出来的初衷。

下面举个具体的例子，代码如下：

.content {
  border: 5px solid pink;
  border-radius: 5px;
  width: 500px;
}
.image {
  width: 150px;
}
.text {
  font-size: 14pt;
}

<!-- 省略内容部分 -->
<div class="content">
  <img class="image" src="">
  <div class="text">...</div>
</div>

效果如下：

下图是给图片image设置左浮动float: left;后的效果：

注意：将文本换成内联元素（a、b、span、img、input、…）也能实现内容环绕图片的效果。

若把图片的浮动换成绝对定位position: absolute;，其效果如下：

可以发现文字并不会环绕图片，而是直接被图片覆盖了。

2 为什么要清除浮动

当页面中还存在其他元素时，浮动可能会对其他元素的布局造成影响，如下图所示，此时页面并无异常：

但把文本内容减少后，如下图所示：

可以发现粉色框由于文本内容的减少，其高度也会随之减小，由于粉色框在计算高度时，不会计算浮动元素的高度，因此粉色框的高度为其中文本内容（沁园春雪）的高度。这样导致蓝色框上移而被图片覆盖，此时就要清除浮动，使粉色框高度撑开包裹图片，避免影响到蓝色框中的内容。

清除浮动究其本质为父容器未设置高度且子元素设置浮动时，父容器的高度不能被内容撑开（高度塌陷）。此时，元素会溢出到容器外而影响布局。

3 清除浮动clear属性

clear属性用于指定一个元素的左侧或右侧是否允许出现浮动元素，可能的取值如下：

值	描述
left	左侧不允许出现浮动元素
right	右侧不允许出现浮动元素
both	左侧和右侧不允许出现浮动元素
none	默认值，允许左侧和右侧出现浮动元素

给文本添加clear: left;样式属性，表示文本的左侧不允许出现浮动元素，由于图片事先设置了浮动，所以文本会另起一行显示，效果如下：

这样虽然解决了粉色框高度塌陷问题，但是却失去了文字环绕效果。

4 清除浮动的方法

4.1 额外标签法

从第三章的例子中可以获得灵感，文本在添加clear: left;样式属性清除左浮动后，会在图片下另起一行显示，所以粉色框的高度被撑开，解决了高度塌陷问题，那么完全可以用其他的元素来做这件事情，让文本依然处于原来的位置，这就是额外标签法，在浮动元素父级的末尾添加一个空的块级元素即可，再为其添加clear: both样式属性：

<!-- 省略内容部分 -->
<div class="content">
  <img class="image" src="">
  <div class="text">沁园春雪</div>
  <!-- 额外标签 -->
  <div style="clear: both"></div>
</div>
<div class="footer text">毛泽东诗词</div>

效果如下：

4.2 after伪元素法

伪元素after的作用是在元素之后添加一个子元素，但是这个元素并不会存在于DOM中，因此被称为伪元素。其实伪元素法和额外标签法的原理一样，都是通过在浮动元素父级的末尾添加一个空的元素来撑开父级元素的高度，使得浮动元素依然能包裹在父级盒子中，达到清除浮动的效果，只不过区别在于额外标签法添加的是一个真实的元素，而伪元素法添加的是伪元素。定义clearfix类的after伪元素如下：

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

将伪元素类clearfix添加到父级元素content上：

<!-- 省略内容部分 -->
<div class="content clearfix">
  <img class="image" src="">
  <div class="text">沁园春雪</div>
</div>
<div class="footer text">毛泽东诗词</div>

效果如下：

4.3 触发BFC清除浮动

BFC（Block formatting context）为块级格式化上下文，BFC可以理解为CSS中一个独立的布局环境，BFC中的元素布局不受外部元素的影响，BFC在计算高度时，内部浮动元素的高度也要计算在内，因此就避免了高度塌陷问题。

触发BFC的方式有很多种，详见BFC-MDN，这里选择最为常用的给父元素添加overflow: hidden属性的方式：

.content {
  /* ... */
  overflow: hidden;
}

效果如下：

5 总结

常用的清除浮动方法从原理上来讲只有两种：

1. 撑开父元素高度（额外标签法、after伪元素法）
2. 触发BFC机制

在实际项目中选择清除浮动的方法需要具体问题具体分析，不同的方法也有自身的优缺点，如额外标签法虽然兼容性好，但是会在页面中添加空标签，降低了代码可读性；而after伪元素法又可能产生IE浏览器的兼容问题。