bfc

BFC(Block formatting context) 直译为‘块级格式化上下文’。它是一个独立的渲染区域。并且有它自己一套布局规则，在这块区域内生成BFC来改变样式。BFC内部的元素和外面的元素互不影响。

　　BFC的布局规则：

　　　　　　　　　1.内部的Box会在垂直方向，一个接一个地放置。

　　　　　　　　　2.Box垂直方向的距离要由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

　　　　　　　　　3.每个元素的margin box的左边，与包含块border box 的左边向相接触（对于从左往右的格式化，否则相反）。即使在浮动也是如此

　　　　　　　　　4.BFC的区域不会与float box重叠

　　　　　　　　　5.BFC就是页面上的一个隔离的独立容器，容器里面子元素不会影响到外面的元素。反之也如此

　　　　　　　　　6.计算BFC的高度时，浮动元素也参与 计算

　　哪些元素会生成BFC：

　　　　　　　　　1.根元素

　　　　　　　　　2.float属性为none

　　　　　　　　　3.position为absolute或fixed

　　　　　　　　　4.display为inline-block,table-cell,table-caption,flex,inline-flex

　　　　　　　　　5.overflow不为visible

　　BFC的作用：

　　　　　　　　　1.自适应的两栏布局

　　　　　　　　　2.清除浮动

　　　　　　　　　3.防止margin重叠

??????????????????????????????????????????????????????????????????????????????????????????????????????????????