Mather Blog

CSS Block Formatting Context (BFC)

默认分类 0 评

BFC

BFC 全称是Block Formatting Context,即块格式化上下文。它是 CSS2.1 规范定义的,属于 CSS渲染定位的一个概念。

块格式化上下文是 Web页面的可视 CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

听起来非常难理解,但编写代码时往往会无意中创建了 BFC 元素。要创建 BFC 元素也很简单,为元素设置以下之一属性:

  • float 属性为 leftright
  • overflow 属性为 autoscrollhidden
  • display 属性为 table-cellinline-block
  • position 属性为 absolutefixed

当然在普遍的情况下也会有 BFC 情况,它会形成相对独立的布局

  • html 标签内的元素
  • Flexbox 布局中的子元素
  • Grid 布局中的子元素
  • 表格元素

还有若干种情况会创建 BFC ,但相对少见。见结尾处的参考链接。

相对独立的布局

BFC 的特别之处在于,它会创建相对独立的布局,这里的独立指的是不影响外部元素,不被外部元素影响,也不被其中的元素所影响。

不影响外部元素

image

如上图所示,因为外边距合并的特性存在,标题三的外边距会溢出到两个蓝色块之间,影响了两个块之间的布局。

垂直外边距会合并的情况是 W3C CSS2 规范定义之初就存在的,并不能说是 bug ,而是 future。

通过给第二个蓝色块设置 overflow: hidden,标题三的外边距只会在 BFC 内部生效。

不受外部元素影响

image

在实际项目中,往往会有左右两列的结构,比如评论列表,右侧文字会自动填满剩余空间。

<div>
    <img style="float:left; margin-right: 10px;" 
        src="http://placekitten.com/64/64" alt="">
    <p>
      块格式化上下文(Block Formatting Context,BFC) 
      是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,
      也是浮动元素与其他元素交互的区域。
    </p>
</div>
p {
    overflow: hidden;
}

浮动设计之初只是为了实现文字环绕效果,但却被过度使用,阴差阳错地形成了浮动布局。结合浮动和 BFC 来实现两列结构,是可行的。

给段落设置 overflow: hidden,使段落形成 BFC ,消除了文字对图片环绕的效果。

不被包含的元素所影响

image

<div>
    <img src="http://placekitten.com/50/50" alt="">
    <p>Cat</p>
</div>
div {
     overflow: hidden;
}

浮动元素由于脱离了正常文档流,容器不会包含浮动元素的高度,只有正常文档流的高度,这也是大家常说的高度塌陷。这时候容器设置 overflow: hidden,形成 BFC,父元素的高度就会正常。也是一种清除浮动方式。

参考

W3C Visual formatting model

Understanding CSS Layout And The Block Formatting Context

CSS 世界 - 6.3 CSS 世界的结界 —— BFC

块格式化上下文 - MDN

float | CSS-Tricks

记一次 Webview 刷新网页功能失效的调查 —— 混合开发模式的 debugger 之旅

发表评论
撰写评论