盒模型之BFC与文档流对比（二）

一 BFC(Block formatting context): 称为块级格式化上下文，是CSS中的一种渲染机制。它决定了块级元素如何对它的子元素内容进行布局，以及与子元素同级别的兄弟元素的关系和相互作用。（BFC与普通文档流比较）

  BFC是解决普通文档流的问题：普通文档流的布局规则

1、浮动的元素是不会被父级计算高度
2、非浮动元素会覆盖浮动元素的位置
3、margin会传递给父级
4、两个相邻的元素上下margin会重叠

 触发BFC的方式（以下任意一条就可以）

1、float的值不为none
2、overflow的值不为visible
3、display的值为table-cell、table-caption和inline-block之一
4、position的值不为static或者releative中任何一个

 

二 文档流和非文档流的定义：

1.  文档流：将窗体自上而下分成一行行，并在每一行中按从左到右的顺序来排放元素，这个我们称之为文档流。
2. 非文档流(脱离文档流):也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
3. 下面有三种定位将使元素脱离文档流;一旦该元素脱离文档流，后面的元素都会做相应的位置调整: 1 float 2绝对定位：position:absolute 3固定定位 :position:fixed(注意：在IE中浮动也是存在于文档流中的。)
4. 需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute 脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
5. z-index属性指定了一个元素的堆叠顺序;一个元素可以有正数或负数的堆叠顺序;注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

 

BFC原理总结与实践：https://juejin.im/post/6844904082226987021#heading-3