CSS浮动

1 为什么需要浮动？

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签的默认排列方式。
浮动最典型的应用 ： 可以让多个块级元素一行内排列显示

2 什么是浮动？

float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或另一个浮动框的边缘。float: left/right/none ;

3 浮动特性

1. 脱离标准普通流的控制（浮）移动到指定位置（动） （俗称脱标）
2. 浮动的盒子不用保留原先的位置
3. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
4. 浮动元素会具有行内块元素的特性

4 为什么需要清除浮动？

子盒子浮动，脱标，父盒子没有高度就为0，不会被撑开盒子
由于 父级盒子 很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准盒子。

5 清除浮动的方法

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

5.1 额外标签法

就是在最后一个浮动的子元素后面添加一个额外标签，添加 清除浮动样式
解决办法：
在浮动元素末尾添加一个空的标签。例如<div style="clear: both"></div>

5.2 清除浮动–父级添加 overflow

给父级添加overflow属性，将其属性值设置为 hidden 、auto 或 scroll 。

5.3 :after伪元素法

5.4 双伪元素清除浮动