关于浮动

具有包裹特性：
display：inline-block/table-cell
porition:absolute/fixed/sticky
overflow:hidden/scroll
具有破坏性：
display:none
position:absolute/fixed/sticky
浮动具有破坏性，会让父元素高度塌陷。
浮动的原本作用仅仅是为了实现文字环绕效果，父容器高度塌陷是原本效果，而不是bug
如何降低浮动破坏性的影响？
清除浮动
清除浮动带来的影响：
方法一：在底部插入一个具有clear：both声明的元素.可以发生margin重叠
        1.HTML block水平元素底部
        2.css after 伪元素底部生成  .clearfix:after{}   IE67不能用
方法二：让父元素BFC（IE8+）或者haslayout(IE6/IE7)。不可以发生margin重叠
        float：left/right
        position：absolute/fixed
        overflow：hidden/scroll（IE7+）
        display：inline-block/table-cell(IE8+)
        width/height/zoom:1/...(IE6/IE7)

clearfix只能应用在包含浮动子元素的父级元素上

浮动的特性
1.元素block块状化（砖头化）
2.破坏性造成的紧密排列特性（去空格化）

应用在流体布局
1.文字环绕衍生--单侧固定
width+float 图片设定宽度和浮动
padding-left/margin-left 文本设定距离图片的固定距离