关于BFC的理解

最新推荐文章于 2025-05-22 11:16:15 发布

shenmill

最新推荐文章于 2025-05-22 11:16:15 发布

阅读量780

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css布局文章标签： css

本文链接：https://blog.youkuaiyun.com/shenmill/article/details/55670398

css布局专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS中的块级格式化上下文(BFC)的概念、形成规则及其特性，并通过实例展示了如何利用BFC解决自适应布局、清除浮动及避免垂直margin重叠等问题。

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

BFC相信大家都听过吧，在页面布局的时候肯定会接触过，但是对于BFC真的了解多少呢，这几天复习接触到了BFC所以我拿来总结一下，也对自己的思路进行一下整理。

一. BFC是什么？

BFC名字叫做块级格式化上下文，是W3C CSS 2.1 规范中引入的一个概念。在普通流中的盒子会参与一种格式化上下文，块级盒参与块级格式化上下文（BFC），行级盒参与行级格式化上下文（IFC），这里我们主要理解一下。

BFC决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，简单理解BFC就是一块独立的渲染区域，它规定这个区域里的内容与区域外部毫不相干，即互不影响。

二. BFC的形成规则

float不为none。
position为absolute或fixed。
overflow不为visibility。
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

三. BFC的特性

box在竖直方向上依次排列。
box垂直方向上的距离由margin决定，属于同一个BFC区域的box的margin值会发生叠加。
计算BFC区域的高度时，浮动元素也要参与计算。
每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此。
BFC的区域不会与float box重叠。

四. 结合例子理解

说了以上那么多，干脆来点干货结合着理解一下。

自适应两列布局

 <style type="text/css">
      *{
            margin: 0;
            padding: 0;
        }
       body{
          height: 500px;
          width: 100%;
       }
       .Div1{
          height: 100%;
          width: 40%;
          float: left;
          background-color: red;
       }
       .Div2{
          height: 100%;
          width: 60%;
          background-color: blue;
       }
</style>
<body>
    <div class="Div1"></div>
    <div class="Div2"></div>
</body>

这里写图片描述

理解：Div1通过设置float形成一个bfc区域，依据bfc特性（每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此）所以Div2的左边界会与body重合，因而两个盒子会有重叠部分。

下面改动代码再看看效果：

  <style type="text/css">
      *{
          margin: 0;
          padding: 0;
        }
       body{
          height: 500px;
          width: 100%;
       }
       .Div1{
          height: 100%;
          width: 40%;
          float: left;
          background-color: red;
       }
       .Div2{
          height: 100%;
          width: 60%;
          background-color: blue;
          overflow: hidden;
       }
</style>
<body>
    <div class="Div1"></div>
    <div class="Div2"></div>
</body>

这里写图片描述

理解：Div2通过设置overflow形成一个bfc区域，根据bfc特性（BFC的区域不会与float box重叠），因而去除了重叠部分，这就是我们想要的效果了。

那使用bfc思想构成三列布局也就简单了，代码如下：

<style type="text/css">
      *{
          margin: 0;
          padding: 0;
       }
       body{
          height: 500px;
          width: 100%;
       }
       .Div1{
          height: 100%;
          width: 40%;
          float: left;
          background-color: red;
       }
       .Div2{
          height: 100%;
          width: 30%;
          background-color: blue;
          float: left;
          overflow: hidden;
       }
       .Div3{
          height: 100%;
          width: 30%;
          background-color: green;
          overflow: hidden;
       }
</style>
<body>
    <div class="Div1"></div>
    <div class="Div2"></div>
    <div class="Div3"></div>
</body>

这里写图片描述

理解：根据上面两列布局的思想，我先把前两个盒子构成两列布局的样子，再将第二个和第三个盒子也依据两列布局的思想构成就好了，这下自适应的四列，五列等等都可以用这个思想了。

清除浮动

<style type="text/css">
    .par {
          border: 5px solid #fcc;
          width: 300px;
          }
    .child {
          border: 5px solid #f66;
          width:100px;
          height: 100px;
          float: left;
        }
</style>
<body>
        <div class="par">
            <div class="child"></div>
            <div class="child"></div>
        </div>
</body>

这里写图片描述

理解：我们所期待的样子应该是par盒子的高度被里面内容撑开，但是却没有，里面的盒子设置float值形成bfc，而bfc是一个独立的容器，不会与外面的元素产生作用，所以par根本没有受到里面内容物的影响。所以该怎么办呢，我们对代码做以下处理：

<style type="text/css">
         .par {
                border: 5px solid #fcc;
                width: 300px;
                overflow: hidden;
            }
        .child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }
</style>
<body>
        <div class="par">
            <div class="child"></div>
            <div class="child"></div>
        </div>
</body>

这里写图片描述

理解：par盒子通过设置overflow值形成一个bfc，一句bfc特性（计算BFC区域的高度时，浮动元素也要参与计算），所以计算par盒子的高度时，也需要包含里面的盒子高度。

防止垂直 margin 重叠

<style type="text/css">
        p {
            color: #f55;
            background: #fcc;
            width: 200px;
            line-height: 100px;
            text-align:center;
            margin: 100px;
        }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

这里写图片描述

理解：根据bfc特性（box垂直方向上的距离由margin决定，属于同一个BFC区域的box的margin值会发生叠加），所以造成了两个p标签之间的高度为100px，发生了叠加。但是这并不是我们想要的结果，所以可以考虑将这两个盒子分开也就是不让它们处于同一个bfc中，就不会发生叠加了，代码改动如下：

<style type="text/css">
        .wrap {
            overflow: hidden;
        }
        p {
            color: #f55;
            background: #fcc;
            width: 200px;
            line-height: 100px;
            text-align:center;
            margin: 100px;
        }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>