跳到主要内容

BFC

BFC

在块格式化上下文中,盒子的布局方式如下:

  • 从包含块的顶部开始,从上往下一个接一个的垂直排布,两个盒子之间的间隙取决于margin属性,并且会发生外边距重叠的现象;
  • 每个盒子左边缘接触包含块的左边缘(如果是从右到左的书写方式,则接触右边缘)。即使是浮动元素也是如此,除非这个浮动的盒子创建了新的格式化上下文。

根据 W3C 的规范来看,以下情况可以创建块格式化上下文:

  • 根元素<html>整体属于块格式化上下文

  • float属性不等于none元素

  • position:absolue,或position:fixed的绝对定位元素

  • 生成块容器,但是非块盒的元素,例如display属性值为inline-blocktable-cell或者table-caption

  • display:flow-root可以创建没有副作用的块格式化上下文,不会对容器元素本身造成任何影响

  • 生成块盒子,且overflow属性值不是默认值visible的元素

BFC 的应用

关于 BFC 的应用,如盒模型所介绍的那样,首先它能解决父元素和子元素的外边距重叠问题,也能解决相邻元素之间的外边距重叠问题。

其次 BFC 能清除float带来的副作用float元素会脱离正常流布局,其宽度和高度无法被正确计算,导致其周围元素会出现包裹在float元素周围或者与其发生重叠的现象。此时如果float所在的包含元素创建了块级格式化上下文就能解决float带来的影响。