文章目录
1. 为什么要清除浮动2. 排版问题示例3. 清除浮动本质及策略4. 清除浮动方案4.1 额外标签法4.2 父级添加overflow4.3 :after伪元素法4.4 双伪元素清除浮动
5. 小结5.1 清除浮动前提条件5.2 方案对比
1. 为什么要清除浮动
大白话：由于父级盒子在很多情况下，不方便给出确定高度(eg. 图一)，但是子盒子开启浮动后，脱离了文档流，不再占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子。 术语：由于浮动元素不再占用原文档流的位置，所以会对其父容器后面的元素排版产生影响。
2. 排版问题示例
代码如下：
效果： 预期效果为footer在旺财和小强的下面，而在旺财和小强开启浮动后，脱离标准流，导致其父.box高度0(内容自适应)，影响了footer的布局排版。
3. 清除浮动本质及策略
语法：在css中，设置clear:属性值
属性值描述left不允许左侧有浮动元素(清除左侧浮动的影响)right不允许右侧有浮动元素(清除右侧浮动的影响)both同时清除左右两侧浮动的影响)
清除浮动的本质就是清除浮动元素脱离标准流造成的影响。
一般，在实际工作中，使用both居多。 清除浮动的策略是：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
4. 清除浮动方案
4.1 额外标签法
额外标签法，也成为隔墙法，是W3C推荐的做法。 该方法会在浮动元素末尾添加一个空的标签，例如
或其它标签。 注意：这个空标签必须是块级元素。优点：通俗易懂，方便简单 缺点：添加许多无意义的标签，结构化差
实践如下：
.clear{
clear: both;
}
效果如下：
4.2 父级添加overflow
子不教，父之过。 可以给浮动元素父级添加overflow属性，将其属性值设置为hidden、auto或scroll。
示例如下：
.box{
background-color: chocolate;
overflow: hidden;
}
效果：
优点：代码简介 缺点：无法显示溢出的部分或不是预期效果。
4.3 :after伪元素法
:after方式其实是额外标签发的升级版，也就是给父元素添加如下属性：
.box::after{
content: "";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
/* IE 6、7适配 */
.box {
*zoom: 1;
}
效果如图： 优点：没有增加标签，结构更简单 缺点：需适配低版本浏览器 代表网站：百度、网易等
4.4 双伪元素清除浮动
有点类似4.3，只不过又通过:before添加了前置伪元素，代码如下：
.box::before,.box::after{
content: "";
display: table;
}
.box::after{
clear: both;
}
/* IE 6、7适配 */
.box{
zoom: 1;
}
效果图： 优点：代码更简洁 缺点：需适配低版本浏览器 代表网站：小米、腾讯等
5. 小结
5.1 清除浮动前提条件
父级没有高度子盒子开启浮动影响后续布局排版
5.2 方案对比
方式优点缺点额外标签发(隔墙法)通俗易懂，书写方便添加许多无意义标签，结构化差父级overflow:hidden书写方便溢出隐藏等父级after伪元素结构语义化正确IE6-7不支持after，兼容问题父级双伪元素结构语义化正确IE6-7不支持after，兼容问题