BFC（块格式化上下文）详解

日晞

已于 2023-08-25 13:47:11 修改

阅读量158

点赞数

分类专栏：布局与事件 HTML-CSS 文章标签： BFC 渲染区域 margin重叠清除浮动 CSS布局

于 2021-08-16 18:32:31 首次发布

本文链接：https://blog.csdn.net/weixin_44644385/article/details/119739163

版权

HTML-CSS 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

布局与事件

8 篇文章 0 订阅

订阅专栏

是什么（what）：是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素

怎么形成（how）:

float 不设为 none
overflow 值不设为 visible 或 clip 的块级元素
position 是absolute 或 fixed
display 是flex ,inline-block,grid,table

应用：

清浮动清浮动具体实现页面
避免 margin 重叠(item1 的 margin-bottom 和 item2 的 margin-top 重叠，会取二者较大值，假如相等，取其一)。

下图即为margin 重叠效果：margin 最终只取了.sec 的 margin-top

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style type="text/css">
    .first {
      margin-bottom: 5px;
      background-color: pink;
    }
    .sec {
      margin-top: 65px;
      background-color: greenyellow;
    }
    .clear {
      /* overflow: hidden; */
    }
  </style>

  <body>
    <div class="box">
      <div class="clear">
        <div class="first">1111</div>
      </div>
      <div class="clear">
        <div class="sec">2222</div>
      </div>
    </div>
  </body>
</html>

解决办法，通过 BFC 来生成独立的渲染区域：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style type="text/css">
    .first {
      margin-bottom: 5px;
      background-color: pink;
    }
    .sec {
      margin-top: 65px;
      background-color: greenyellow;
    }
    .clear {
        overflow: hidden; 
    }
  </style>

  <body>
    <div class="box">
      <div class="clear">
        <div class="first">1111</div>
      </div>
      <div class="clear">
        <div class="sec">2222</div>
      </div>
    </div>
  </body>
</html>