BFC（Block Formatting Contexts）块级格式化上下文

dlxxdlcc
64 阅读2分钟

什么是BFC？

BFC 全称：Block Formatting Context， 名为 块级格式化上下文。

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

如何触发BFC？

  • 根元素或其它包含它的元素
  • 浮动 float: left/right/inherit
  • 绝对定位元素 position: absolute/fixed
  • 行内块 display: inline-block
  • 表格单元格 display: table-cell
  • 溢出元素 overflow: hidden/scroll/auto/inherit
  • 弹性盒子 display: flex/inline-flex

BFC布局规则

  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算

BFC应用场景

1、 自适应两栏布局

应用原理：BFC 的区域不会和浮动区域重叠，所以就可以把侧边栏固定宽度且左浮动，而对右侧内容触发 BFC，使得它的宽度自适应该行剩余宽度。

<div class="container">
    <div class="aside">aside</div>
    <div class="main">main</div>
</div>

<style>
.aside {
    float: left;
    width: 100px;
}
.main {
    <!-- 触发 BFC -->
    overflow: auto;
}
</style>

2、解决高度塌陷

浮动造成的问题就是父元素高度坍塌，所以清除浮动需要解决的问题就是让父元素的高度恢复正常。而用 BFC 清除浮动的原理就是：计算 BFC 的高度时，浮动元素也参与计算。只要触发父元素的 BFC 即可。

<div class="container"> 
    <div class="box"></div> 
    <div class="box"></div> 
</div>

<style>
.box { 
    float:left;
    width:100px; 
    height:100px; 
 } 
.container { 
    <!-- 触发 BFC -->
    display:inline-block;
} 
</style>

3、 解决垂直 margin 合并

BFC 渲染原理之一：同一个 BFC 下的垂直 margin 会发生合并。所以如果让 2 个元素不在同一个 BFC 中即可阻止垂直 margin 合并。那如何让 2 个相邻的兄弟元素不在同一个 BFC 中呢？可以给其中一个元素外面包裹一层，然后触发其包裹层的 BFC，这样一来 2 个元素就不会在同一个 BFC 中了。


<div class="container">
    <div class="a">a</div>
    <div class="contain-b">
        <div class="b">b</div>
    </div>
</div>

<style>
.a, .b {
    border: 1px solid #999;
    margin: 10px;
}
.contain-b {
    <!-- 触发 BFC -->
    overflow: hidden;
}
</style>
avatar
文章
阅读
粉丝