简单理解float浮动

原本意义：实现文字环绕效果

BFC Block formatting context

块级格式化上下文

具有包裹性属性

display：inline-block/table-cell

position:absolute/fixed/sticky

verflow:hidden/scroll

破坏

容器被破坏, 父元素高度塌陷

display：none

position：absolute/fixed/sticky

清除浮动

html元素底部： clear:both

css伪元素底部：.clearfix:after{}

应用于包含浮动子元素的父级元素上

/* IE8 */
.clearfix:after{
    content:"";
    display:block;
    height:0;
    overflow:hidden;
    clear:both;
}

/* IE6, IE7 */
.clearfix{
    *zoom:1;
}      

浮动

1、元素block块状化（砖头化）

2、破坏性造成的紧密排列特性（去空格化）