对BFC的理解

Posted 2020-11-22 tomandjerry

BFC

块格式化上下文（Block Formatting Context），是web页面的可视化css渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗理解

BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其外部元素。

如果一个元素符合出发BFC的条件，则BFC中的元素布局不受外部影响。

浮动元素会创建BFC，则浮动元素内部子元素受该浮动元素影响，所以两个浮动元素之间是互不影响的。

创建BFC

• 根元素或包含根元素的元素

• 浮动元素 float = left|right 或 inherit，float 不能等于none

• 绝对定位元素 position = absolute|fixed
• display = inline-block|flex|inline-flex|table-cell|table-caption

• overflow = hidden|auto|scroll 不能等于visible

BFC的特性

BFC是一个独立的容器，它不会影响其外部元素，外部元素也无法影响到它。

BFC内部的元素从顶部开始一个接一个垂直排列，盒子之间的间距是由margin决定的。

在同一个BFC中，两个相邻的块级盒子的垂直外边距会发生重叠。

BFC区域不会和float box发生重叠，因为float box也属于BFC

BFC能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算。

BFC的作用

解决高度塌陷：浮动元素会脱离文档流（绝对定位也会脱离文档流），导致无法计算准确的高度

解决方式：在容器中创建BFC

<style>
    .container {
        overflow: hidden;
        background: green;
    }
    .container .sibling {
        float: left;
        margin: 10px;
        background: red;
    }
</style>

<div class="container">
    <div class="sibling"></div>
    <div class="sibling"></div>
</div>

需要注意的是：

• 通过 overflow:hidden 创建 BFC，固然可以解决高度塌陷的问题，但是大范围应用在布局上肯定不是最合适的，毕竟 overflow:hidden 会造成溢出隐藏的问题，尤其是与 JS 的交互效果会有影响。
• 我们可以使用 clearfix 实现清除浮动

外边距折叠

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的垂直边距相遇时， 它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者。

注意外边距折叠的条件是margin必须相邻

折叠外边距的取值

• 两个相邻的外边距都是 正数 时，折叠外边距是两者中较大的值。
• 两个相邻的外边距都是 负数 时，折叠外边距是两者中绝对值较大的值。
• 两个相邻的外边距是 一正一负 时，折叠外边距是两者相加的和。

<style>
   .container {
       overflow: hidden;//最外面的容器为bfc
   }
   .container .box {
       width: 150px;
       height: 150px;
       background: red;
       margin: 10px;
   }
</style>

<div class="container">
   <div class="box"></div>
   <div class="box"></div> 
</div>

外边距折叠（Margin collapsing）只会发生在属于同一BFC的块级元素之间。如果它们属于不同的 BFC，它们之间的外边距则不会折叠。所以通过创建一个不同的 BFC ，就可以避免外边距折叠

<style>
    .container {
        overflow: hidden;//最外面的容器为bfc
        background: blue;
    }
    
    .container .box {
        width: 150px;
        height: 150px;
        background: red;
        margin: 10px;
    }
    .newBFC {
        overflow: hidden;//创建BFC，解决外边距折叠问题
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="newBFC">
       <div class="box"></div> 
    </div>
</div>

参考博客： https://segmentfault.com/a/1190000013647777