理解BFC(Block Formatting Contexts)

BFC(Block Formatting Contexts)和包含块在 CSS 里都属于比较抽象的基础知识。重在理解而非应用。

什么是 BFC

文档流中所有元素按照一套渲染规则进行定位最终表现在浏览器等媒介中。W3C把这个过程称为视觉格式化。

BFC(Block formatting context)直译为"块级格式化上下文"

在块格式化上下文中,块元素生成的框会从包含块的顶部开始,一个接一个地,垂直向下地摆放。两个兄弟框之间的垂直距离由margin属性来决定,在同一个块格式化上下文中,相邻的块级框之间的垂直外边距会出现折叠。

在块格式化上下文中,每个框的左外边距边要紧贴其 包含块 的左边。即使在有浮动的情景下也是如此,除非框创建了一个新的块格式化上下文(在这种情况下该框可能会为了避开浮动框而变窄)。

这两段话的细节

  1. 相邻框垂直方向的距离由 margin 决定。同一个 BFC 的两个相邻框的垂直 margin 会发生重叠
  2. 每个框的左边都会紧贴在包含块的左边,即使存在浮动也是如此。
  3. 新BFC会避开相邻的浮动框,不和浮动框发生重叠。

可以这么理解:BFC 就是页面上的一个独立的渲染区,BFC 区域里面的元素按照基本规则渲染,但是它们不受外面元素影响,也不影响外面元素。

什么情况创建 BFC

  • 根元素或其它包含它的元素
  • 浮动 (元素的 float 不为 none)
  • 绝对定位元素 (元素的 position 为 absolute 或 fixed)
  • 内联块 inline-blocks (元素的 display: inline-block)
  • 表格单元格 (元素的 display: table-cell,HTML表格单元格默认属性)
  • 表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
  • overflow 的值不为 visible的元素
  • 弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

块格式化上下文包括了创建该上下文的元素的所有子元素,但不包括创建了新的块格式化上下文的子元素。

BFC的效果实例

<style>  
    .fl {
        width: 150px;
        height: 100px;
        background: gray;
        float: left;
    }
    .r {
        width: 300px;
        height: 120px;
        background: #CCCCCC;
    }
</style>  
<body>  
    <div class="fl"></div>
    <div class="r"></div>
</body>  

bfc-float

这个示例符合:每个框的左边都会紧贴在包含块的左边,即使存在浮动也是如此。

做个修改给.r添加声明overflow: hidden;.r的 div 创建新 BFC

符合规则:新 BFC 会避开相邻的浮动框,不和浮动框发生重叠。