BFC与文档流对比

Posted 2020-12-20 terrymin

一BFC(Block formatting context): 称为块级格式化上下文，是CSS中的一种渲染机制。是一个拥有独立渲染区域的盒子(也可以理解为结界)，规定了内部元素如何布局，并且盒子内部元素与外部元素互不影响。

 

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

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

 

BFC与普通文档流比较：https://blog.csdn.net/baidu_37107022/article/details/71634396

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