07 BFC 理解与应用

• 什么是 BFC？如何应用？

什么是 BFC

• BFC（Block Formatting Context）直译为“块级格式化上下文”。
• 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

形成 BFC 的条件

• 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display (inline-block、table-cells、flex)
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 的特性

• 内部的 Box 会在垂直方向，一个接一个地放置。
• Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠

BFC 的应用

• 阻止 margin 重叠
• 可以包含浮动元素 —— 清除内部浮动
• 自适应两栏布局
• 防止元素被浮动元素覆盖

<style type="text/css">
  .container {
    background-color: skyblue;
  }
  .left {
    float: left;
  }
  .bfc {
    /* 触发元素 BFC */
    /* overflow: hidden;  */
  }
</style>

<div class="container bfc">
  <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;" />
  <p class="bfc">某一段文字……</p>
</div>