BFC

英文全称: block formatting context

中文翻译: 块级格式化上下文

常用触发条件

• 浮动元素 float: 不是none
• 绝对定位元素 position: absolute 或 flxed
• 行内块 display: inline block
• overflow: 不为 visible
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

解决问题

案例1:清除浮动

<div class="content clear">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.clear {
  overflow: hidden;
}
.box {
  width: 9rem;
  height: 9rem;
  background-color: aqua;
  float: left;
}

案例2: margin-top溢出

    <div class="content clear">
      <div class="box"></div>
    </div>

.clear {
  overflow: hidden;
}
.box {
  width: 9rem;
  height: 9rem;
  background-color: aqua;
  margin-top: 100px;
}