BFC 笔记

最新推荐文章于 2025-06-10 15:33:33 发布

翻译最新推荐文章于 2025-06-10 15:33:33 发布 · 281 阅读

文章标签：

#CSS #BFC

CSS 专栏收录该内容

1 篇文章

订阅专栏

BFC，块级排版上下文或者块级格式化上下文。决定盒子的布局及浮动相互影响范围的一个区域。它能使得元素成为一个独立的容器，容器里的子元素不会影响到外面的元素。

如何形成BFC

根元素或其他包含它的元素
浮动（元素的float不为none）
绝对定位元素（position为absolute或者fixed）
行内块（display：inline-block）
表格单元格（display：table-cell，html表格单元格默认属性）
表格标题（display:table-caption,html表格标题默认属性）
overflow 的值不为visible的元素
弹性盒flex boxes（display：flex或者inline-flex）

BFC 的特性

内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
处于同一个BFC中的元素相互影响，可能会发生外边距叠加，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加；
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上；

例子

1、例子1

<style>
  body {
    width: 300px;
  }
  .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: blue;
  }
  .main {
    height: 200px;
    background: orange;
  }
</style>
<body>
  <div class="aside">左浮动</div>
  <div class="main">没浮动</div>
</body>

这里写图片描述
从图片，看到蓝色盒子（含BFC属性）左浮动了，橘色盒子与其重叠了。
根据BFC的特性，如果橘色盒子也有BFC的话，那么就不会被蓝色盒子重叠到。

  .main {
    height: 200px;
    background: orange;
    overflow: hidden; // overflow 的值不为 visible 会形成BFC
  }

这里写图片描述

2、清除浮动

<style>
  .par {
    border: 5px solid blue;
    width: 300px;
    }
  .child {
    border: 5px solid orange;
    width:100px;
    height: 100px;
    float: left;
  }
</style>
<body>
  <div class="par">
    <div class="child">
    </div>
    <div class="child">
    </div>
  </div>
</body>

这里写图片描述

子元素浮动使得父级元素坍塌了，将会影响外面元素的布局，如何解决呢？让父元素拥有BFC属性即可！！！因为 BFC 是隔离的独立容器，容器里面的子元素不会影响到外面的元素。

  .par {
    border: 5px solid blue;
    width: 300px;
    overflow: hidden; // overflow 的值不为 visible 会形成BFC，其他方式也可以。
  }

3、防止垂直 margin 重叠现象

<style>
  p {
    color: #333;
    width: 200px;
    margin: 50px;
  }
  .blue {
    background: blue;
  }
  .orange {
    background: orange;
  }
</style> 
<body>
  <p class="blue">蓝盒子</p> 
  <p class="orange">橘盒子</p> 
</body>

这里写图片描述

正常情况下，margin 属性在垂直方向上就是重叠的，取的是最大的值。他们同属于根元素下的块级格式化上下文，所以它们的外边距就会叠加，而 BFC 的特性是不属于同个块级格式化上下文的元素，的外边距就不会叠加。
于是乎，它俩任何一个是拥有BFC元素的父元素就能破解垂直 margin 重叠问题。

<div style="overflow:hidden;">
    <p class="blue">蓝盒子</p>
</div>

这里写图片描述

参考：https://blog.youkuaiyun.com/u013217071/article/details/53115185