BFC的概念还是有一些不理解

Question

不太理解创建BFC的元素和平时说的脱离文档流是怎样的一个关系，这部分感觉的确不太好理解

Answer 1

弋儿 2019-02-18 10:14:35

普通流里的元素都是一个个排列的，内联元素横着放，块级元素竖着放（自己占满一行），脱离文档流可以理解为它位于另一个高一层的平行世界了，不再在原来的普通流中占据位置（事实上就是层级z-index被提高一层）。

        

BFC 是给这个元素竖起铜墙铁壁，不再受外部影响，当然它内部的子元素依然是按照普通流的规则排列的。html 就是一个最大的 BFC，他里面的子元素什么排列规则，BFC 里面的子元素就是什么排布规则。BFC不继承，同一个元素不会位于两个BFC中

BFC对普通流（兄弟元素上下边距可能重叠，但BFC之后不会重叠）和浮动流（子元素浮动之后会造成父级塌陷，父级BFC之后子元素的高度会撑起父级，也就是浮动元素高度参与计算；左右布局时，浮动元素和BFC元素的隔离，有了楚河汉界）有影响；和定位流没什么关系（绝对定位脱离文档流和BFC就啥关系，各自遵循各自的规则）

• 提问者 雪落无痕2018 #1

  非常感谢！

Answer 2

快乐动起来呀 2018-12-18 00:04:23

用大白话讲BFC和脱离文档流没啥关系