什么是BFC(Block Formatting Context )

定义:

浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。

可以理解为BFC是一个块独立的作用域,它有些自己的特性

那如何产生BFC?
通过以下几种方法就能生成一个BCF

  1. float 的值不是 none
  2. position 的值不是static或者relative
  3. display的值是inline-blocktable-cellflextable-caption或者inline-flex
  4. overflow 的值不是 visible

BFC有哪些特点

  • 根元素会默认创建一个BFC

  • 在同一个BCF中,每一个元素左外边与包含块(父块)的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩–包裹性),除非这个元素也创建了一个新的 BFC。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    就像上面的例子,container是一个BFC,里面的元素按照‘元素左外边与包含块(父块)的左边相接触’,就算是浮动元素也是这样,所以两者会发生重叠

  • 创建了BFC的元素不能与浮动元素重叠。
    还是上面那个例子,如果把d2创建为BFC,那么两者将不会发生重叠
    在这里插入图片描述
    在这里插入图片描述

  • 当容器有足够的剩余空间容纳 BFC 的宽度时,所有浏览器都会将 BFC 放置在浮动元素所在行的剩余空间内。
    还是上面那个例子,d2之所以会放在d1后面,就是因为这条规则,假如container宽度只有60px,那么剩余10px的空间放不下d2(50px),就会将d2放到下一行(少数浏览器可能实现不同)

  • css规定,在计算生成了 BFC 的元素的高度时,其浮动子元素应该参与计算。
    所以说BFC包含浮动元素不会发生高度坍塌,可以利用BFC这个特性来清除浮动。

  • 两个相邻的普通流中的块在垂直位置的空白边会发生折叠现象。
    也就是处于同一个BFC中的两个垂直窗口的margin会重叠,解决这种现象可以分别给两个块包裹一层BFC,这样就不会折叠了。因为BFC还有一个特性就是:生成 BFC 的元素不会和在流中的子元素发生空白边折叠。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    上面这种情况 margin 会发生折叠,本来应该是2em,折完只剩1em(所以说margin也可以理解为‘最小的间距’)。然后为了解决这种情况,我们分别给b1,b2包裹一个BFC
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    这样就能解决折叠问题了。不能直接让b1,b2变成BFC,这样是无法解决折叠的,因为b1,b2这时是处于同一个BFC中!(你可以仅把 .BFC里面的 overflow 注释掉,看看会发生什么,然后结合这个现象去理解接下来这一条特性)

  • BCF就是页面上的一个隔离的独立容器,容器里面的子元素不会在布局上影响到外面的元素,反之也是如此。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐