是什么

BFC: block format context，块级格式化上下文， 有一套自己的渲染规则

渲染规则

• 内部的元素从上到下排列
• 内部相邻元素margin会重叠，以大为主
• 每个元素的左边距与块左边距想接触
• bfc区域不和浮动元素重叠
• 计算高度时， 浮动元素也计算在内
• 独立空间， 不影响外部，也不受外部影响

怎么用

触发条件

• html根元素
• 浮动元素，float:left,right
• overflow不为visible, 可以为scroll/hidden/auto
• display值为：inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• position为absolute、fixed

应用

• 防止重叠

<style>
    .t1{
      height: 20px;
      margin: 100px;
    }
    .bfc1{
      overflow: auto;
    }
  </style>
  <p class="t1">1</p>
  <div class="bfc1">
    <p class="t1">2</p>
  </div>

• 清除浮动

  <style style>
    .bfc2{
      border: 1px solid #f4f;
      overflow: hidden;
    }
    .f1{
      float:left;
      height: 100px;
      width: 100px;
      border: 1px solid #ddd;
    }
  </style>
  <div class="bfc2">
    <div class="f1">float</div>
    <div class="f1">float</div>
  </div>

• 自适应多栏布局