浅析BFC

 阅读约 10 分钟

原文链接: Fyerl's Blog

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

HTML 代码结构如下

<div class="form-item">
  <span class="label">登录名</span>
  <div class="content">
    <input type="text" placeholder="请输入登录名">
  </div>
</div>

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 的特性以及使用场景

一、消除外边距折叠

<style>
  .block {
    background: #eee;
    overflow: hidden;
  }

  .item {
    height: 44px;
    margin: 12px 0;
    background: #666;
  }
</style>
<body>
  <div class="block"> 
    <p class="item"></p>
    <p class="item"></p>
  </div>
</body>

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

<style>
  .block {
    background: #eee;
    overflow: hidden;
  }

  .item-wrapper {
    overflow: hidden;
  }

  .item {
    height: 44px;
    margin: 12px 0;
    background: #666;
  }
</style>
<body>
  <div class="block">
    <div class="item-wrapper">
      <p class="item"></p>
    </div>
    <div class="item-wrapper">
      <p class="item"></p>
    </div>
  </div>
</body>

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

二、清除浮动

<style>
  .block {
    padding: 12px;
    background: #eee;
  }

  .item {
    float: left;
    height: 44px;
    width: 100%;
    background: #666;
  }
</style>
<body>
  <div class="block">
    <p class="item"></p>
  </div>
</body>

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

<style>
  .block {
    padding: 12px;
    background: #eee;
    overflow: hidden;
  }

  .item {
    float: left;
    height: 44px;
    width: 100%;
    background: #666;
  }
</style>
<body>
  <div class="block">
    <p class="item"></p>
  </div>
</body>

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

<style>
  .block {
    padding: 12px;
    background: #eee;
    overflow: hidden;
  }

  .label {
    float: left;
    height: 44px;
    width: 200px;
    background: #999;
    margin-right: 12px;
  }
  
  .content {
    height: 68px;
    background: #666;
  }
</style>
<body>
  <div class="block">
    <p class="label"></p>
    <p class="content"></p>
  </div>
</body>

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

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

<style>
  .block {
    padding: 12px;
    background: #eee;
    overflow: hidden;
  }

  .label {
    float: left;
    height: 44px;
    width: 200px;
    background: #999;
    margin-right: 12px;
  }
  
  .content {
    height: 68px;
    background: #666;
    overflow: hidden;
  }
</style>
<body>
  <div class="block">
    <p class="label"></p>
    <p class="content"></p>
  </div>
</body>

总结

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

参考:

阅读 619发布于 2018-04-18

推荐阅读
Fyerl's blog
用户专栏

Fyerl的博客

0 人关注
3 篇文章
专栏主页
目录