tags: 2019年鐵人賽 、 css

前言

前一篇提到解決 Margin collapse 的方法除了用 border 或 padding 隔開，還有 BFC ，這篇整理了幾個 BFC 觀念。

Block fomatting context

摘自w3.org
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

Formatting context 我理解為它是一個渲染區域，這區域有自已的渲染規則，決定自己的子元素們要如何佈局。

一個 BFC 是一個渲染區域，通俗定義是

• 內部的 boxes 在垂直方向，從頂部開始一個接一個排列
• 兄弟層的兩個 boxes 垂直距離由 margin 決定
• 相鄰的两个 block-level boxes，垂直 margin 會重疊(collapsed)。

若要建立一个新的 BFC 至少满足下列任一條件：

• display 為 inline-block 或 table-cell 或 table-caption
• float 的值不為 none
• position 的值不為 static 或 relative
• overflow 的值不為 visible

在這個新的 BFC 內，元素佈局是不受外面影響。

用例子來逐步理解一下
範例

<div class="container">
  <p>兄弟元素1</p>
  <p>兄弟元素2</p>
</div>

.container{
  background-color: green;
}
p{
  color:gray;
  text-align:center;
  background-color: yellow;
}

1. <div> 裡包含 <p> 元素，可以看到第一個/最後一個 <p> 的 margin 成為父層的 margin 了
   

2. 在 <div> 建立一個 BFC，可以看到 <p> 的 margin 被包含在 <div> 裡了！

.container{
  background-color: green;
  overflow:hidden; /* 建立一個 BFC */
}

3. 兩個兄弟元素 <p> 的 margin 重疊，可以透過再建立一個新 BFC ，讓兩個 <p> 各自屬於不同的 BFC

<div class="container">
  <p>兄弟元素1</p>
  <div class="newBFC">
    <p>兄弟元素2</p>
  </div>
</div>

.container{
  background-color: green;
  overflow:hidden;
}
p{
  color:gray;
  text-align:center;
  background-color: yellow;
}
.newBFC{
  overflow:hidden;
}

參考文章

• 理解CSS中BFC
• 常规流( Normal flow )