BFC原理，布局规则

1. 什么是 BFC
   既 Block Formatting Context（块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

2. 存在以下几种方案可创建 BFC：

⚪ 浮动元素， float 值不为 none
⚪ 绝对定位元素，position 属性为 absolute ，fixed
⚪ 非块级盒子的块级容器（ display 值为 inline-blocks , table-cells , table-captions 等）
⚪ overflow 的值不为 visible （ visiable 是默认值。内容不会被修剪，会呈现在元素框之外）
⚪ 除此之外，根元素， HTML 元素本身就是 BFC（ 最大的一个BFC ）

3. BFC布局规则
   ⚪ 内部的盒子会在垂直方向，一个一个地放置；
   ⚪ 盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的上下 margin 会发生重叠；
   ⚪ 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
   ⚪ BFC 的区域不会与 float 重叠；
   ⚪ BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此；
   ⚪ 计算 BFC 的高度时，浮动元素也参与计算。

自适应两栏布局
阻止元素被浮动的元素覆盖，自适应成两栏布局

<!-- 左边的宽度固定，右边的内容自适应宽度(不设置宽度) -->
<div class="ldiv">
 左浮动的元素
</div>
<div class="rdiv">
 没有设置浮动, 没有设置宽度 width
 但是触发 BFC 元素
</div>
<style>
    .ldiv { 
        height: 100px;
        width: 100px;
        float: left;
        background: aqua; 
    }
    .rdiv { 
        height: 100px;
        background: blueviolet; 
        overflow: hidden; 
    }
</style>

清除内部浮动
解决浮动元素不占高度的问题（浮动元素未被包裹在父容器）

<div class="parent">
 <div class="child"></div>
</div>
<style>
    .parent { 
        border: 1px solid blueviolet; 
        overflow: hidden; 
    }
    .child { 
        width: 100px;
        height: 100px;
        background: aqua;
        float: left; 
    }
</style>

解决 margin 重叠
为了防止 margin 重叠， 可以使多个 box 分属于不同的 BFC 时

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>

<style>
  .container {
      overflow: hidden;
  }
  p {
      width: 100px;
      height: 100px;
      background: aqua;
      margin: 10px;
  }
</style>

阻止元素被浮动元素覆盖

<div class="ldiv">
 左浮动的元素
</div>
<div class="rdiv">
 没有设置浮动, 但是触发 BFC 元素
</div>
<style>
 .ldiv {
        height: 100px;
        width: 100px;
        float: left;
        background: aqua;
    }
 .rdiv {
        width: 300px; 
        height: 200px;
        background: blueviolet; 
        overflow: hidden;
    }
</style>