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