浅析BFC

原文链接: Fyerl's Blog

说起 BFC 其实有点像闭包在大多数人印象中的感觉，平时都用过，但在不了解定义的情况下大多数人却又不知道这就是 BFC。之所以会想了解下什么是 BFC，是因为前些日的一个简单且常见的排版问题

HTML 代码结构如下

  登录名
  

    
  

label 的宽度是自适应的，content 需填充满此行剩余的区域。常规方法通过 flex 布局，很简单

.form-item {
  display: flex;
}

.content {
  flex: 1;
}

但是 flex 的兼容性还是不够向下的，于是搜索了一下，得到了这么个方案

.label {
  float: left;
}

.content {
  overflow: hidden;
}

label 给了个 float 可以理解，但 content 写了一个 overflow: hidden 是什么意思？实则这里的 content 就形成了一个 BFC，所以还是先回到 BFC 这个概念上

什么是 BFC

BFC 即（Block Format Context）块级格式化范围，是 CSS2.1 中用于规定块级盒子的渲染布局方式

如何触发创建一个 BFC

• root: 页面的根元素
• display: inline-block | flex | flow-root
• position: absolute | fixed
• overflow: hidden | auto | scroll

以上条件满足任一便会触发创建一个 BFC，同时也可以看出这些属性的设置会产生一些额外的效果，比如仅仅是想触发 BFC，却使用了 overflow: scroll 导致元素出现了滚动条，所以具体使用哪种方式触发 BFC，还是需要结合实际的业务场景

BFC 的特性以及使用场景

一、消除外边距折叠

如上，两个 item 均存在上、下 margin，理想情况下，两个 item 之间间距应是 24px，但结果只有 12px，这便是外边距折叠，兄弟元素外边距不同时，取最大值。这种行为只存在于兄弟元素在同一 BFC 下这种情形。若想消除外边距折叠，对上述代码做一些改造，使兄弟元素存在于不同 BFC 之中即可

此时 item-wrapper 便形成了一个 BFC，解决了外边距折叠问题。相信大家遇到这种情况习以为常地会加一层外层元素再给个 overflow: hidden，但为什么 overflow: hidden 就能消除折叠，其实背后是 BFC 的原理

二、清除浮动

此时内部 item 已脱离常规文档流，父元素无法被子元素撑起。若需要父元素包裹住子元素，一是通过常见的 clearfix 方案，二就是同过构造父元素为 BFC，也就是通过大家熟悉的 overflow: hidden，这里涉及到的特性就是 BFC 能包裹住自己的后代浮动元素

三、防止被浮动元素覆盖和围绕浮动元素

回到最开始的布局问题上了，此时 label 浮动于 content 之上，如果 content 内填充了其他元素，当 content 高度大于 label 一定高度时 content 内元素会被 label 覆盖或文本元素会围绕着 label。如下图，当然不希望右侧地址的第二行会从最左边开始

此时一行代码构造 content 为 BFC，问题便解决了

总结

本文对 BFC 稍作梳理，望对代码中那些莫名的 overflow: hidden 的理解有所帮助。上文提到的 overflow: flow-root 可以看下大漠的这篇文章《flow-root》

参考:

• 理解 CSS 布局和 BFC
• 10分钟理解 BFC 原理