一:浮动是什么?
CSS 的 浮动（Float），会使元素向左或向右移动，直到外边缘碰到包含框或另一个浮动元素位置。
二:浮动的特点：
1、浮动属性float有三个属性值，分别是：left,right,none。
2、脱离标准流,在标准流不占位置 。
3、浮动元素比标准流高半个级别,可以覆盖标准流中的元素。
4、浮动找浮动(同方向浮动),下一个浮动元素会在上一个浮动元素后面左右浮动。
5、浮动元素会受到上面元素边界的影响。
6 浮动元素有特殊的显示效果:一行可以显示多个,可以设置宽高,中间没有间隙。
CSS中，所有的元素都可以设置它浮动，给予它float属性，那么这个元素就会具备一个行内块级元素特性，但是如果使用了浮动之后没有对其进行清除浮动，则会出现一些问题，导致结果不是你所想呈现的效果.
为什么要清除浮动？
1 前提：
浮动元素----标准流的父元素都是要有高度。
所有的父盒子的标准流盒子都要有高度吗？no!!!!!
理想的情况是：让子盒子撑开父亲，有多少孩子，父盒子就有多高！
但是就会有问题：
父级盒子很多情况下，不方便给高度，但是子盒子浮动不占位置，
最后父盒子高度为0，就会影响下面的标准流 的盒子。
浮动元素不占用原文挡的位置，就会对后面的元素排版产生影响。
为什么清除浮动？
清除浮动后，父级就会根据子盒子自动监测高度。
父级有了高度，就不会影响下面的标准流了。
清除浮动的本质 就是清除浮动造成的影响。
浮动元素 脱离标准流的影响。
如果父盒子本身有高度，则不需要清除浮动。
这边有四种方式可以清除浮动~~~
方式一 : 使用 overflow 属性来清除浮动:
overflow:hidden | auto | scroll;
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响
注意：一般情况下也不会使用这种方式，因为 overflow:hidden 有一个特点，离开了这个元素所在的区域以后会被隐藏（ overflow:hidden 会将超出的部分隐藏起来）
优点：代码简洁
缺点：无法显示溢出的部分
推荐指数: ☆ ☆ ☆
方式二: 使用额外标签法:额外标签法也称为隔墙法，是 W3C 推荐的做法。
<div style="clear:both"></div>，或者其他标签（如<br />等）。
在浮动的盒子之下再放一个标签，在这个标签中使用 clear:both ，
来清除浮动对页面的影响 .
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差
注意： 一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式，会增加页面的标签，造成结构的混乱 .
推荐指数: ☆ ☆ ☆
方式三: 使用伪元素来清除浮动 给父元素添加:
.clearfix:after{
content:"";
height:0;
line-height:0;
/*将文本转为块级元素*/
display:block;
/*元素隐藏*/
visibility:hidden;
/*清除浮动*/
clear:both
}
.clearfix{
/* IE6、7 专有 */
zoom:1;
}
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站： 百度、淘宝网、网易等
推荐指数: ☆ ☆ ☆ ☆
方法四:使用 双伪元素 清除浮动
.clearfix:before,.clearfix:after {
content: "";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom: 1;
}
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等
推荐指数: ☆ ☆ ☆ ☆ ☆
总结一下~~~~
为什么需要清除浮动？
- 父级没高度。
- 子盒子浮动了。
- 影响下面布局了，我们就应该清除浮动了。
| 清除浮动的方法 | 优点 | 缺点 |
|---|---|---|
| 额外标签法 | 通俗易懂 | 添加许多无意义的标签 |
| 父级overflow:hidden | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容性问题 |
