小聊BFC

“不起眼”的BFC

BFC这个词可能以前没怎么听过，但是稍微接触过前端的人都知道css中有点小坑啊!!!!
今天想要跟你们分享一下我的对于BFC的一个理解。若有不足或理解错误的地方，还望各位大佬指出，哈哈，感激感激。要是喜欢的话，也不妨点个赞啊。

---

*1.BFC 的定义：

* **BFC** （**Block fomatting context**）：是一个独立的渲染区域，只有块级元素参与，规定了内部的块级元素如何布局，并与区域外部的绝不相干。

---

*2.BFC 的建立：

• overflow 的值不为visible

• float 的值不为none

• position 的值不为static
• display 的值为inline-block、table-cell、table-caption（由于table会默认生成一个匿名的table-cell,而table-cell又会生成BFC）

---

*3.BFC应用

• 元素垂直方向上下重叠(margin大的值会覆盖小的值，而不是两值之和)

  .box p {
    margin: 10px 0;
    background-color: yellow;
  }
  .box p:nth-child(1) {
    margin-bottom: 25px;
  }

  效果以下：

  解决方法：

  <div class="box" id="box">
      <p>Lorem ipsum dolor sit.</p>
      <div style="overflow:hidden;">
          <p>Lorem ipsum dolor sit.</p>
      </div>
      <p>Lorem ipsum dolor sit.</p>
    </div>

  效果以下：

• 解决侵占浮动元素的问题

  .one {
    width: 100px;
    height: 100px;
    background-color: pink;
  }
  .two {
    height: 100px;
    background-color: red;
    width: 100px;
  }

  效果图：

  解决方法：

  .one {
    float: left;
    width: 100px;
    height: 100px;
    background-color: pink;
  }
  .two {
    height: 100px;
    background-color: red;
    float: left;
    width: 100px;
  }

  效果图：

---

总而言之，BFC就是利用一个块级元素，让里面的元素不受外部元素的影响。