float布局

float的元素会根据float属性值挨着前一个float后的位置定位，如果剩下的空间不足，则会另起一行，另起一行也有特点，并不是直接在整个父元素下另起一行。另起一行要优先满足围绕上一个float元素。

对于部分浮动的元素：

1 对于block元素：会由于float使得父元素坍塌，可能被隐藏在float元素下面；
使用float的弊端影响:
    a. 使父元素坍塌
    解决：
        1 利用BFC高度计算特性，将父元素格式化为一个BFC。
        2 使用clear：both+冗余的div
  #flex .a{
            float: left;
            background-color: #58a;
            width: 100px;
            height: 100px;
        }
 #flex .clear{
            clear:both;
        }

<div id="flex">
            <div class="a"></div>
            <div class="clear"></div>
 </div>
        3 使用clear:both+伪元素   
#flex:after{
            content: '';
            display: block;
            clear:both;
        }

b 使块级元素可能被float遮挡
可将其设置display属性值为inline-block，table-cell，table-caption，flex，inline-flex；使其表现跟inline元素的形式一样（围绕着float），这里其实是利用了BFC不与float重叠的特性。