#格式化上下文

#块格式化上下文

#布局规则

在垂直方向按序放置
在垂直方向两个相邻 Box 的 margin 会重叠
子在父的左边
BFC 是独立容器，里外元素互不影响

#应用场景

#margin 重叠和溢出

给一个方块开启 BFC

#溢出


<div
>
<div  style={{
    backgroundColor: 'blue'
}}>
  <div
  style={{
    width: 200,
    height: 200,
    background: 'rosybrown',
    margin: '60px auto',
  }}
></div>
</div>

<div
  style={{
    overflow: 'hidden', // 开启BFC
    backgroundColor: 'green',
  }}
>
  <div
    style={{
      width: 200,
      height: 200,
      background: 'rosybrown',
      margin: '60px auto',
    }}
  ></div>
</div>

</div>

#重叠

<div
>
<div  style={{
    backgroundColor: 'blue'
}}>
  <div
  style={{
    width: 200,
    height: 200,
    background: 'rosybrown',
    margin: '60px auto',
  }}
></div>
 <div
  style={{
    width: 200,
    height: 200,
    background: 'rosybrown',
    margin: '60px auto',
  }}
></div>
</div>

<div
  style={{
    backgroundColor: 'green',
  }}
>
  <div
    style={{
      width: 200,
      height: 200,
      background: 'rosybrown',
      margin: '60px auto',
    }}
  ></div>

  <div
    style={{
      overflow: 'hidden', // 开启BFC，这里也解决了溢出问题
    }}
  >
    <div
      style={{
        width: 200,
        height: 200,
        background: 'rosybrown',
        margin: '60px auto',
      }}
    ></div>
  </div>
</div>

</div>

#高度塌陷

<div
  style={{
    overflow: 'hidden',
    background: 'gray',
  }}
>
  <div
    style={{
      width: 200,
      height: 200,
      background: 'rosybrown',
      float: 'left', // 浮动会塌陷，绝对定位不会
    }}
  ></div>
</div>

#参考资料

MDN
掘金