使用清除浮动会发生什么？
当一个元素被添加float:right等属性的时候发生了什么？
- float 属性可以使一个元素脱离正常的文档流（normal flow），然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。
-
float 使用了块状布局，所以元素的 display 会被改变，改变前后如下：
change.png
而第一点正是其副作用的来源，normal flow 通俗来说就是浏览器默认摆放 box 的标准，有如下特点：
- block 元素独占一行，从上到下。
- inline 元素从左到右，排在一行显示。
- 这些元素都会占位置。
而 float 元素脱离了 normal flow 就相当于进入了一个平行空间，不再与其后边及父级块级元素发生反应，这一特性使得 float 元素无法撑起父元素的高度，导致父元素塌陷。 第一点中还提到其他的文本和行内元素环绕 float元素，但是 float 后的块级元素会与其发生重叠。
解决方法
为了解决 float 属性引发的问题，我们在 CSS 中引入了clear:left|right|both属性，其作用分别是在元素的 左侧|右侧|两侧 不允许存在 float 元素，我们可以用他来清除其副作用。 利用 clear 属性我们有两种方法来清除浮动。
1. 为 float 元素后的元素添加 clear 属性
未添加：
1.jpg
添加后：
2.jpg
2.利用伪元素
3.jpg
有时我们会遇到上图的情况，float 元素后没有其他元素了，这时该怎么办？固然我们可以在其后添加一个空div，然后像1中一样解决问题，但这种方式并不优雅，伪元素这时候就派上用场了，我们可以写一个.clearfix 工具样式，当给需要清除浮动时，就为其加上这个类。效果如下：
4.jpg
3.修改父元素的overflow为overflow: auto|hidden (触发BFC)
5.png
4.其它方案
除了以上方案外，还有一些其他的方案，比如将父元素的 display 样式属性改为display:table或者position:fixed，但是这些方案容易带来更大的副作用，得不偿失，所以实践中一般都会使用以上三种方案。
