清理浮动那些事

先说一下什么是文档流和文本流：文档流本是自上而下，自左而右的布局，针对于盒子模型，如果一个元素浮动了，那么它下面没有浮动的元素就会无视它所占据的空间，布局在它下方。但是文本流是针对文字，这种情况下，文字还是会环绕它布局。脱离文档流的方法一般是float,absolute,fixed


清除浮动：
如果一个父元素没有设置高，其中的子元素浮动了，而由于父元素的高度为0，那么下面的元素就会自动补位。
清理浮动的方法：
1.

.clear{
    clear:both;
}

<div class="box">
    <div class="div1"></div>
    <div class="div2"></div>
</div>
<div class="div3"></div>

在浮动的盒子下面再加一个div，给一个class=“clear”;
如果放在div2下面会撑开父元素高度，并消除浮动影响；
如果在box下面会消除浮动影响但是不会撑开父元素高度；

2.
找到浮动盒子的父元素，设置`overflow:hidden;`
即可消除影响，但是它会将超出的部分隐藏起来；

3.  伪元素（推荐）

.clearfix:after{
            content:" ";
            display:block;
            clear:both;
            height:0;
        }
        　.clearfix{
            zoom:1; //兼容IE
        }

给浮动元素的父容器加一个`class=".clearfix"；`
通过伪元素在内部元素的后面添加一个看不见的"."/" "，并赋予clear属性清除浮动

4.给浮动元素的父元素也设置浮动