知识库

BFC（块级格式化上下文）

参与 BFC 的元素使用 CSS 框模型概述的规则，该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互。

形成BFC的条件

根元素 <html>
使用 float 使其浮动的元素
绝对定位的元素，position 值为 fixed、sticky
display 为以下其中之一的值
- inline-block
- table-*
- display: flow-root
- display: flow-root list-item
flex container 的一级子元素 flex-items；
overflow 除了 visible 以外的值

BFC 的特性

内部的块元素会在垂直方向上一个接一个的放置，距离由 margin 决定（导致外边距折叠）。
BFC 区域不会与 float 的元素区域重叠（实现两栏布局、三栏布局，解决文字环绕）。
计算 BFC 的高度时，浮动元素也参与计算（解决高度塌陷）。
BFC 是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

应用

外边距重叠

当两个 div 元素处于同一个 BFC（这里是 html 元素）下时，会发生外边距折叠，可以将 div 放在不同的 BFC 中避免外边距重叠。

html

<style>
  .container {
    background-color: skyblue;
    display: flow-root;
  }
  .item-1 {
    background: pink;
    margin-bottom: 100px;
  }
  .item-2 {
    background: pink;
    margin-top: 100px;
  }
</style>

<div class="container">
  <div class="item-1">Lorem ipsum dolor sit amet.</div>
</div>
<div class="container">
  <div class="item-2">Lorem ipsum dolor sit amet.</div>
</div>

两栏布局、三栏布局

文字环绕

html

 <style>
  .container {
    width: 500px;
    background-color: skyblue;
    /* display: flow-root; */
  }
  .item-1 {
    background: orange;
    /* 开启浮动，浮动元素覆盖了 item-2 */
    float: left;
  }
  .item-2 {
    background: pink;
    /* 开启 BFC，BFC 区域不会与 float 的元素区域重叠，解决文字环绕 */
    display: flow-root;
  }
</style>
<div class="container">
  <div class="item-1">Lorem ipsum dolor sit amet.</div>
  <div class="item-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, minus.</div>
</div>

高度塌陷

html

<style>
  #container {
    background-color: skyblue;

    /* 创建一个 BFC，不会产生任何副作用。 */
    display: flow-root;
  }

  #bfc {
    background: orange;
    height: 50px;

    /* container 高度由子元素撑开，开启浮动，脱离文档流，高度塌陷。 */
    float: left;
  }
</style>

<div id="container">
  <div id="bfc">Lorem ipsum dolor sit amet.</div>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat, nisi.</p>
</div>

BFC（块级格式化上下文） ​

形成BFC的条件 ​

BFC 的 特性 ​

应用 ​

BFC（块级格式化上下文）

形成BFC的条件

BFC 的特性

应用