什么是 BFC，BFC 有什么作用，如何形成 BFC

hauk0101
532 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

核心描述

  • 什么是 BFC ：块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
  • 如何形成 BFC：以下方式会创建 BFC
    • 根元素 （html）
    • 浮动元素（ float 值不为 none）
    • 绝对定位元素（ position 值为 absolute 或 fixed）
    • 行内块元素（display 值为 inline-block）
    • 表格单元格（display 值为 table-cell）
    • 表格标题（display 值为 table-caption）
    • 匿名表格单元格元素（display 值为 table、table-row、table-row-group、table-header-group、table-footer-group 或 inline-table）
    • overflow 值不为 visible、clip 的块元素
    • display 值为 flow-root 的元素
    • contain 值为 layout、content 或 paint 的元素
    • 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素）
    • 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素）
    • 多列容器（column-count 或 column-width 值不为 auto 包括 column-count 为1）
    • column-span 值为 all 元素始终会创建一个新的 BFC
  • BFC 有什么作用
    • 同一个 BFC 容器中的元素的 margin 会发生折叠，要避免折叠的话，可以将对于的元素分别放到两个不同的 BFC 容器中
    • BFC 可以包含内部的浮动元素（清除浮动）
    • BFC 可以阻止元素被浮动元素覆盖（排除外部浮动）
    • 可以实现两列自适应布局
  • 注意：在低版本的 IE 中，并没有完全实现 BFC，而是引入了其特有的 Layout 布局，也就是为什么有一些清除浮动的操作会用到 zoom:1 的属性，其实就是在 IE 中的一种触发 Layout 布局的兼容写法

知识拓展

  • FC：全称是 Formatting Contexts，是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
  • 除了 BFC 之外，还有 IFC、GFC、FFC 等概念：
    • IFC：IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响) IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。 那么IFC一般有什么用呢？ 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
    • GFC：GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。 那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。
    • FFC：FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。 Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。 伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。
  • 个人理解：
    • 看到这么多概念之后，针对类似 BFC、IFC、GFC、FFC 等等定义，其实并不影响我们的日常开发，甚至我们常用的一些布局方法或经验，或多或少都用到了这些规范。这些规范更多的是 CSS 文档对浏览器的约束，要求它们应当按此实现布局渲染。而开发者并没有特殊的 API 能够调用这些规范。
    • 简单点说就是，BFC 这些概念对我们来说只是用来解释，为什么在设置一些元素的 css 样式属性时，会有对应的规则样式渲染。而并没有必要刻意将这些概念套用在实际项目中。

参考资料

浏览知识共享许可协议

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

avatar
文章
阅读
粉丝