简单理解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、破坏性造成的紧密排列特性（去空格化）