iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
Modern Web

重新認識 CSS系列 第 25

重新認識 CSS - Block formatting context (BFC)

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看。

「重新認識 CSS」系列文章發文於:

formatting context 是一組相關 box 所在的環境。不同的 formatting context 會根據不同的規則來佈局它們的 box。

例如:

以下是 MDN 對於在何種情境下會建立 BFC 的定義:

以下情境會建立 BFC:

  • 文件中的 root 元素 (在 HTML 中是 html 元素)
  • float 屬性不為 none 的元素
  • position 屬性為 absolutefixed 的元素
  • display 屬性為 inline-blockflow-roottable-celltable-caption 的元素
  • display 屬性為 tabletable-rowtable-row-grouptable-header-grouptable-footer-groupinline-block 的元素 implicitly 建立的 anonymous table cell
  • overflow 屬性不為 visible 的 block 元素
  • contain 屬性為 layoutcontentpaint 的元素
  • flex item ( display 屬性為 flexinline-flex 的元素的子元素)
  • grid item ( display 屬性為 gridinline-grid 的元素的子元素)
  • multicol container ( column-countcolumn-width 屬性不為 auto 的元素,包含 column-count: 1 的元素)
  • column-span: all 應該始終建立一個新的 formatting context,即使該元素沒有包含在 multicol container 中

float 的定位和 clear 規則都只會適用於同一個 BFC 中的內容:

  • float 屬性不會影響其他 BFC 中的內容佈局
  • clear 屬性只能 clear 同一個 BFC 中有設定 clear 屬性的元素之前的 float 元素,不會影響到元素本身內部或其他 BFC 中的 float 元素

資料來源:


上一篇
重新認識 CSS - formatting context & independent formatting context
下一篇
重新認識 CSS - Inline formatting context (IFC)
系列文
重新認識 CSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言