[TOC]
BFC(Block Formatting Context——塊格式化上下文)是Web頁面的可視化CSS渲染的一部分。它是布局過程中生成塊級盒子的區域,也是浮動元素與其他元素的交互限定區域。簡單來說,BFC是一個獨立的渲染區域,它遵循一些渲染規則。
## BFC的渲染規則
- BFC在Web頁面上是一個獨立的容器,容器內外互不影響
- 和標準文檔流一樣,BFC內的元素垂直方向的邊距會發生重疊
- BFC不會與浮動元素的盒子重疊
- 計算BFC高度時即使子元素浮動也參與計算
## 如何創建BFC
MDN web docs現在給出創建BFC的方法有以下幾種([原文鏈接](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context)):
- 根元素或包含根元素的元素
- 浮動元素(元素的 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,即使該元素沒有包裹在一個多列容器中
## BFC的應用場景
### 解決塊級元素垂直方向的邊距重疊問題
```html
<section id="father">
<style>
#father {
background-color: pink;
overflow: hidden;
}
#father .child {
background-color: red;
margin: 15px auto 20px;
}
</style>
<div class="child">這是第一個div</div>
<div class="child">這是第二個div</div>
</section>
```

由于塊級元素垂直方向的邊距會發生重疊,第一個div和第二個div之間的間距并不是15px加上20px后的35px,而是20px(較大的margin值),為了解決邊距重疊的問題,讓第兩個div之間的間距變成35px,可以在div外面創建一個BFC,比如:
```html
<div style="overflow:hidden">
<div class="child">這是第二個div</div>
</div>
```

因為BFC是一個獨立的容器,容器內外互不影響,所以這里兩個div之間的間距就變成了35px。
### 清除浮動
```html
<section id="father">
<style>
#father {
background-color: pink;
}
#father .child {
font-size: 58px;
float: left;
}
</style>
<div class="child">這是一個浮動元素</div>
</section>
```

子元素浮動后,父元素失去了高度,為了清除浮動帶來的這個影響可以將父元素設置成一個BFC:
```css
#father {
background-color: pink;
overflow: auto;
```

因為BFC計算高度時,即使子元素是浮動元素也參與計算,所以這里的父元素高度就等于子元素高度而不是之前的 0 了。
### 解決元素浮動后發生重疊的問題
```html
<section id="father">
<style>
#father {
background-color: red;
}
#father .left {
background-color: pink;
width: 100px;
height: 100px;
float: left;
}
#father .right {
background-color: #ccc;
height: 120px;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
```

如圖,左邊的元素浮動之后,由于脫離標準文檔流疊在了右邊的元素上,為了讓兩個元素不重疊,我們把右邊的元素設置成BFC:
```css
#father .right {
background-color: #ccc;
height: 120px;
overflow: hidden;
}
```

因為BFC不會與浮動元素的盒子重疊,所以這里右邊的元素就不會疊在左邊的浮動元素下面了。
********
[查看原文](https://blog.csdn.net/yshenhua/article/details/79485398)
- 說明
- CSS與HTML
- BFC的特性及其常見應用
- CSS深入理解之margin
- CSS深入理解之line-height
- CSS盒模型相關知識
- CSS知識總結
- HTML知識總結
- 三欄布局五種方式
- JavaScript內置對象
- 1.循環
- 2.數組方法對比
- 3.字符串實用常操紀要
- JavaScript核心
- var、let、const定義變量
- this 的指向問題詳解
- 箭頭函數
- ES6部分知識歸納
- ES6的Class
- Promise和Async/await
- 面向對象的概念及JS中的表現
- 創建對象的九種方式
- JS的繼承
- 閉包總結
- 構造函數與作用域
- 原型與原型鏈
- 函數的四種調用模式
- apply、call、bind詳解
- JavaScript應用
- 1.JavaScript實現深拷貝與淺拷貝
- 2.函數防抖與節流
- 3.無阻塞腳本加載技術
- DOM
- 如何寫出高性能DOM?
- 事件探秘
- 事件委托
- 操作DOM常用API詳解
- 重排和重繪
- 運行機制與V8
- 瀏覽器的線程和進程
- Vue.js
- Vue.js知識點總結
- Vue-Router知識點總結
- 父子組件之間通信的十種方式
- 優化首屏加載
- 關于Vuex
- 前端路由原理及實現
- 在Vue.js編寫更好的v-for循環的6種技巧
- 12個Vue.js開發技巧和竅門
- 網絡協議
- HTTP緩存機制
- UDP協議
- TCP協議
- HTTPS協議
- HTTPS的背景知識、協議的需求、設計的難點
- HTTPS與HTTP的區別
- 框架與架構
- MVC、MVP、MVVM
- Gulp與Webpack的區別
- Angular React 和 Vue的比較
- 虛擬DOM和實際的DOM有何不同?
- 架構問題
- 工程化
- npm link命令
- npm scripts 使用指南
- 前端工程簡史
- 常見的構建工具及其對比
- Webpack基本配置與概念
- 設計模式
- 工廠設計模式
- 單例設計模式
- 適配器模式
- 裝飾器模式