BFC

[AILINGANGEL]

BFC

BFC块级格式化上下文, 一旦形成一个块级格式化上下文，这个上下文中的元素的布局不会影响外部元素的布局

如何触发块级格式化上下文（常见）

1. 根元素本身就会形成一个块级格式化上下文
2. overflow不为visible的
3. float不为none
4. inline-block 行内块元素
5. 定位元素（position是absolute或者fixed）
6. flex和grid布局
7. diplay和table相关的，比如table, table-cell等

BFC 的应用场景

1. 经典的两栏布局

<div class="div1"></div>
<div class="div2"></div>

.div1 {
  float: left;
  width: 300px;
  background-color: pink;
  height: calc(100vh - 100px); // 为了展示效果
}

.div2 {
  background-color: black;
  height: 100vh;
  overflow: hidden;
}

解释: 如果不触发div2的BFC, 那么div2会当做浮动元素不存在, 就会出现div1浮动在div2上，在布局中这并不是想要的。在div2上添加overflow:hidden触发BFC, 它就不会和另一个BFC重叠而是各自展示各自的，互不影响

2. 浮动闭合
当给一个元素设置float让其浮动之后它的父元素会塌陷，意思就是父元素无法包裹住这个浮动的子元素。解决这个问题的办法之一就是在父元素上触发BFC, 因为一旦在父元素上触发BFC它内部的所有子元素都不会受到其他元素的影响，为了保证这一点父元素必须包裹住内部所有的子元素，包括浮动的元素

3.外边距合并问题
在同一个BFC中块元素的上下外边距会发生合并，取两者最大的外边距。如果不希望这个合并产生，那么也可以让两个元素分别处于各自的BFC中，因为互不影响，所以不会发生合并

[AILINGANGEL]

BFC最经典的应用就是 两栏布局 以及 浮动闭合