小聊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就是利用一個塊級元素，讓裏面的元素不受外部元素的影響。