浮动的作用，以及清除浮动的方法

1. 浮动的作用：改变盒子的默认的排列方式，例如：让多个盒子排在一行，或者实现2个盒子左右排列。

2. 浮动的特点：脱离文档流的控制移动到指定的位置，不再保留原来的位置。浮动的元素一行显示，以上边缘对齐盒子中间没有间隙。浮动的盒子具有行内块元素的作用。

3. 需要清除浮动的情况：父盒子的高度不方便确定，但是浮动的盒子又不占具位置，导致父级盒子高度为0 ，影响到下面标准流的盒子时，就需要清除浮动。例如下图中，大（父）盒子背景色为绿色，没有设置高度，盒子一和盒子二分别设置为左浮动和右浮动，但是本希望排列在父盒子下面的其他标准流的盒子就移动到了父盒子的位置，就是是浮动带来的问题。

4. 清除浮动的方法

4.1 额外标签法：在最后一个浮动元素的末尾添加一个空的块级标签来清除浮动;

4.2  为父元素添加：overflow:hidden；

4.3  after伪元素方法：代表网站有百度，淘宝，网易。

 

 4.4 双为元素清除浮动：代表网站有小米，腾讯

4.5 当多个盒子都设置了浮动时，一行排不下，而第一个盒子的比其他盒子高时，我们希望排不下的盒子在下面一行重新排列，但是它却跟在第一个高盒子的右下角排列时，也需要清除浮动。导致的问题如下图所示：

决解方法：在需要排列在下一行的盒子上清除浮动，示例如下：

 对清除浮动方法小结