清除浮动的几种方法

CSS

为什么会有 Floats

　　最初，引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。但 大家很快意识到，它可以浮动任何东西，而不仅仅是图像，所以浮动的使用范围扩大了。
　　当我们在网页各处使用 float 的时候，也由此引发的一些副作用，如：父元素塌陷、元素重叠，清除浮动也就是清除这些副作用。

发生了什么

当一个元素被添加float:right等属性的时候发生了什么？
1. float 属性可以使一个元素脱离正常的文档流（normal flow），然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。
2. float 使用了块状布局，所以元素的 display 会被改变，改变前后如下：

而第一点正是其副作用的来源，normal flow 通俗来说就是浏览器默认摆放 box 的标准，有如下特点：

• block 元素独占一行，从上到下。
• inline 元素从左到右，排在一行显示。
• 这些元素都会占位置。

而 float 元素脱离了 normal flow 就相当于进入了一个平行空间，不再与其后边及父级块级元素发生反应，这一特性使得 float 元素无法撑起父元素的高度，导致父元素塌陷。
第一点中还提到其他的文本和行内元素环绕 float元素，但是 float 后的块级元素会与其发生重叠。

怎么解决

为了解决 float 属性引发的问题，我们在 CSS 中引入了clear:left|right|both属性，其作用分别是在元素的 左侧|右侧|两侧 不允许存在 float 元素，我们可以用他来清除其副作用。
利用 clear 属性我们有两种方法来清除浮动。

1. 为 float 元素后的元素添加 clear 属性

其效果如下：
未添加

添加后

2. 利用伪元素

有时我们会遇到上图的情况，float 元素后没有其他元素了，这时该怎么办？固然我们可以在其后添加一个空div，然后像1中一样解决问题，但这种方式并不优雅，伪元素这时候就派上用场了，我们可以写一个.clearfix 工具样式，当给需要清除浮动时，就为其加上这个类。效果如下：

3. 修改父元素的 overflow 属性

将父元素的 overflow 属性修改为 overflow:auto|hidden，效果如下：

4. 其他方案

除了以上方案外，还有一些其他的方案，比如将父元素的 display 样式属性改为display:table或者position:fixed，但是这些方案容易带来更大的副作用，得不偿失，所以实践中一般都会使用以上三种方案。

动手实验

CSS 的细节非常多，几段文字、几张图片远不能将其描述的很清楚，要了解更多的细节、特性、优劣，需要手动修改代码来做实验。
方案 1 代码
方案 2 代码
方案 3 代码