0%

CSS 的 BFC

被问到 BFC 了,讲真,我有时候怀疑自己是不是前端,以前没有注意到这类问题。现在都是组件化开发,平时我自己用到的都是基本的 flex 一把梭,平时页面可能也对细节要求不低,但是讲真,确实没有注意到 BFC,难道是我是写功能太多,切页面太少的缘故?还是说现在浏览器越来越新,我们不需要再考虑这样的问题了?类似于 js 的 varlet

既然碰到了那就学习一下吧。

文档与教程

MDN 的标准文档,读起来可能艰涩一些,可以看一下其他的文章教程后再回过头来看这个文档:

优秀教程文章,可以看了这三篇文章再去看官方文档:

个人理解

先引用一下 MDN 文档,毕竟是标准,当然直接这么看你可能还是有点楞逼,不知道 BFC 是干嘛的?反正我是楞逼的

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

下列方式会创建块格式化上下文:

  • 根元素()
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • 表格单元格(元素的 display 为 table-cell,HTML 表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML 表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是 HTML table、row、tbody、thead、tfoot 的默认属性)或 inline-table)
  • overflow 计算值(Computed)不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content 或 paint 的元素
  • 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
  • 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
  • 多列容器(元素的 column-count 或 column-width (en-US) 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的 BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
  • 块格式化上下文包含创建它的元素内部的所有内容.

是不是有点楞逼,还是不知道 BFC 是干嘛的?还是直接上代码比较直观一些,代码和总结都是我从上面3个文章抄过来的

阻止元素被浮动元素覆盖

一个正常文档流的 block 元素可能被一个 float 元素覆盖,挤占正常文档流,因此可以设置一个元素的 float、display、position 值等方式触发 BFC,以阻止被浮动盒子覆盖。

使用 BFC 包含浮动元素

通过改变包含浮动子元素的父盒子的属性值,触发 BFC,以此来包含子元素的浮动盒子。

使用 BFC 阻止 margin 合并

属于同一个 BFC 的两个相邻块级子元素的上下 margin 会发生重叠,(设置 writing-mode:tb-rl 时,水平 margin 会发生重叠)。所以当两个相邻块级子元素分属于不同的 BFC 时可以阻止 margin 重叠。
这里给任一个相邻块级盒子的外面包一个 div,通过改变此 div 的属性使两个原盒子分属于两个不同的 BFC,以此来阻止 margin 重叠。

后记

其实还有更多的细节和技巧,但是时间有限,就不再深入的去研究了,需要的时候再用,多学一点是一点。

比较好奇的是哪种类型厂子面试官会问到这种题?我猜用 IE 比较多的或者对切页面要求高的大概会问到。

问问你身边的朋友,知道 BFC 吗?