技術標籤：筆記前端HTMLjavascriptcsshtml5html

目錄

• BFC是什麼？
• 建立BFC的條件
• BFC功能/特性
• 與清除浮動的關係
• 參考資料

一、BFC 是什麼？

塊格式化上下文（Block Formatting Context，BFC） 是 Web 頁面的可視 CSS 渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素互動的區域。

人話：CSS 不正交，這個 BFC 可以建立一個獨立的區域進行佈局。如一個父盒子建立了 BFC，那麼裡面的子元素無論如何也逃不出父盒子的限制，它只能在父盒子裡面折騰。

二、建立 BFC 的條件

• 根元素或包含根元素的元素
• 浮動元素（元素的 float 不是 none
  ）
• 絕對定位元素（元素的 position 為 absolute 或 fixed）
• 行內塊元素（元素的 display 為 inline-block）
• 表格單元格（元素的 display 為 table-cell，HTML 表格單元格預設為該值）
• 表格標題（元素的 display 為 table-caption，HTML 表格標題預設為該值）
• 匿名錶格單元格元素（元素的 display 為 table 、table-row、table-row-group、table-header-group、table-footer-group（分別是 HTML table、row、tbody、thead、tfoot 的預設屬性）或 inline-table）
• overflow 值不為 visible 的塊元素
• display 值為 flow-root 的元素
• contain 值為 layout、content 或 strict 的元素
• 彈性元素（display 為 flex 或 inline-flex 元素的直接子元素）
  網格元素（display 為 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
• column-span 為 all 的元素始終會建立一個新的 BFC，即使該元素沒有包裹在一個多列容器中（標準變更，Chrome bug
  ）。

塊格式化上下文包含建立它的元素內部的所有內容.

塊格式化上下文對浮動定位（參見 float）與清除浮動（參見 clear）都很重要。浮動定位和清除浮動時只會應用於同一個 BFC 內的元素。浮動不會影響其它 BFC 中元素的佈局，而清除浮動只能清除同一 BFC 中在它前面的元素的浮動。外邊距摺疊（Margin collapsing）也只會發生在屬於同一 BFC 的塊級元素之間。

三、BFC 功能/特性

功能 1：父元素管所有的子元素

• 假設現在有一個父元素盒子和兩個子元素盒子，子元素進行浮動佈局。先演示沒有建立BFC的樣例

<!-- HTML -->
<div class="father">
  <div class="son1"></div>
  <div class="son2"></div>
</div>
<style>
.father {
	border: 1px solid red;
	min-height: 10px;
	margin: 100px auto;
}
.son1,
.son2 {
	float: left;
	width: 200px;
	height: 100px;
	margin-left: 300px;
}
.son1 {
	background-color: aqua;
}
.son2 {
	background-color: black;
}
</style>

• 上面同樣的示例建立BFC之後

  隨意選取一個建立 BFC 的條件之一，如overflow:auto

<!-- HTML -->
<div class="father">
  <div class="son1"></div>
  <div class="son2"></div>
</div>
<style>
.father {
	overflow:auto;	/* 加上這行程式碼使的父元素建立了一個BFC */
	border: 1px solid red;
	min-height: 10px;
	margin: 100px auto;
}
.son1,
.son2 {
	float: left;
	width: 200px;
	height: 100px;
	margin-left: 300px;
}
.son1 {
	background-color: aqua;
}
.son2 {
	background-color: black;
}
</style>

功能 2：兄弟盒子之間互不影響

• 兩個同級之間的兄弟盒子，其中有一個浮動，那麼兩個兄弟盒子之間就會進行重疊。先演示未建立BFC的樣例

<!-- HTML -->
<div class="box1"></div>
<div class="box2"></div>
<style>
	 .box1 {
        width: 100px;
        height: 200px;
        border: 2px solid red;
        float: left;
        margin-left: 300px;
      }
      .box2 {
        height: 100px;
        border: 3px solid black;
      }
</style>

• 上面同樣的例子建立 BFC 後，如：display:flow-root

<!-- HTML -->
<div class="box1"></div>
<div class="box2"></div>
<style>
	 .box1 {
        width: 100px;
        height: 200px;
        border: 2px solid red;
        float: left;
        margin-left: 300px;
      }
      .box2 {
        height: 100px;
        border: 3px solid black;
		display: flow-root;
      }
</style>

四、與清除浮動的關係

BFC與清除浮動沒有關係！

BFC 和清除浮動是兩個獨立存在的，如需清除浮動。只需要加上下面的程式碼

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

五、參考資料

塊格式化上下文