BFC机制与浮动定位脱离文档流

BFC机制与浮动定位脱离文档流

BFC块格式化上下文 —-w3c规定的一种独立渲染区域

渲染流程基本上四个步骤：
1.计算CSS样式
2.构建Render Tree
3.Layout – 定位、大小，换行，（position, overflow等属性）
4.正式开始

脱离标准流的方式有三种——浮动、绝对定位、固定定位
    脱离标准流之后定位的元素，会覆盖浮动的元素，故此定位的比浮动的脱离标准流等级高，且在清除脱离标准流带来的影响中，
    浮动的元素，可以被除浮动的方式来解决对父盒子的影响。
    但脱离标准流定位的元素，给父盒子造成的影响无法清除。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

★★★BFC特性：

1.阻止外边距重叠
（在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单
独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。）

2.承载浮动元素

3.阻止元素被浮动 元素覆盖<