神奇的BFC

最新推荐文章于 2025-08-07 11:18:45 发布

原创最新推荐文章于 2025-08-07 11:18:45 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#box #css

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了CSS中BFC的概念及其布局规则，并通过实例演示了如何利用BFC解决外边距合并、清除浮动及防止元素被浮动元素覆盖等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是BFC

BFC即Block fomatting context的简称，可以简单地理解为“块级排版上下文”。它提供了一个独立的渲染环境和一套独特的渲染规则，只有Block-level box参与其中，它规定了内部的Block-level Box如何布局，并且这个环境中的元素不会与其它环境中的布局互相影响。

二、BFC的布局规则

浮动元素、绝对定位元素，不是块级盒的块级包含块(比如inline-block、table-cell、table-capation)和overflow值不为visible的块级盒子为它们的内容建立了一个新的块级排版上下文。
在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的，相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。参与BFC的布局的只有普通流normal flow中的块级盒，而float、position值不为relative\static的元素是脱离BFC这一布局环境的，不参与BFC的布局
在一个块级排版上下文中，每个盒子的左外边是触碰到包含块的左边的（对于从右向左的排版，则相反），即使在有浮动元素参与的情况下也是如此(即使一个盒子的行盒是因为浮动而收缩了的)，除非这个盒子新建了一个块级排版上下文(在某些情况下这个盒子自身会因为floats而变窄)。
独立的块级排版上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内。而且它会避免与浮动块重叠。

三、BFC的应用场景

1.关于外边距合并

      p {
        width: 100px;
        height: 100px;
        background-color: gray;
        margin:100px;
      }


  <body>
    <p></p>
    <p></p>
  </body>

很明显，两个p元素之间的间距只有100px，而不是200px，这就是所谓的“边距合并”，因为在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。如果想要避免让两个盒子的边距合并，可以考虑把这两个盒子放在不同的BFC中。

.container {
      overflow: hidden;
    }

    p {
      width: 100px;
      height: 100px;
      background-color: gray;
      margin: 100px;
    }

<body>
  <div class='container'>
    <p></p>
  </div>
  <div class='container'>
    <p></p>
  </div>
</body>

边距不合并
在这里，二者的边距并未合并。

2.关于清除浮动

    .parent {
      border: 5px solid red;
      width: 200px;
    }

    .child {
      width: 100px;
      height: 100px;
      background-color: gray;
      float: left;
    }

<body>
  <div class="parent">
    <div class="child">

    </div>
  </div>
</body>

浮动元素脱离了文档流，造成了父容器布局的坍塌。如果触发容器的BFC，那么容器将会包裹浮动元素(清除浮动效果)。

.parent {
      border: 5px solid red;
      width: 200px;
      overflow: hidden;
    }

    .child {
      width: 100px;
      height: 100px;
      background-color: gray;
      float: left;
    }

<body>
  <div class="parent">
    <div class="child">

    </div>
  </div>
</body>

此处达成了清除浮动的效果，避免了浮动对布局的破坏。

3 .阻止元素被浮动元素覆盖

.main {
      border: 2px solid red;
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .left {
      width: 100px;
      height: 100px;
      background-color: gray;
      float: left;
    }

<body>
  <div class="left">
    一个左浮动的元素
  </div>
  <div class="main">
    我是一个没有浮动也没有设置BFC的元素，我的背景色是粉色，宽度200px,边框颜色为红色.宽度为200px，文字表现为环绕
  </div>
</body>

这里写图片描述
此时，第二个元素有部分被浮动元素所覆盖，(但是文本信息表现为环绕效果) 如果想避免元素被覆盖，可触发第二个元素的 BFC 特性，在第二个元素样式中加入 overflow: hidden，就会变这种效果：

这是一种常用的定宽+自适应布局。还可以再加一栏向右浮动构建出两栏定宽+自适应布局。

其实换个角度来看，这三组效果都体现了BFC的排版的独立性：BFC内部和外部的排版不会相互影响。就第一个而言，阻止外边距的合并正是阻止了外界排版对当前BFC区域内边距的影响；第二组中对清除浮动的结果是为了阻止BFC内部浮动对外界布局的影响；第三组中新建的BFC阻止了浮动元素对自身的覆盖，其实也是为了阻止外界浮动布局对BFC内部的影响。