最近工作中我突然產生了一個想法，就如我們人類面臨的終極問題一般，我從哪里來？我到哪里去？在擼代碼進行CSS布局的時候，我會去想，我為什么這么做？，為什么浮動的元素要用overflow？，為什么要用clearfix？，為什么邊距會重疊？為什么absolute就不需要clearfix，為什么...
作業部落地址：https://www.zybuluo.com/shenguotao/note/625449
目錄：
什么是BFC？及其作用！
如何產生BFC？
BFC的應用
- 邊距重疊
- 不與float box重疊
- 高度塌陷
總結
什么是BFC？及其作用！
BFC 即（Block Format Context）快級格式化范圍，是 CSS2.1 中用於規定塊級盒子的渲染布局方式，他在計算盒子高度，margin值等地方有區別於其他環境。
BFC 是一種概念，是對前端布局技術的一種理論上的總結，掌握它可以讓我們在使用CSS +DIV進行布局時，知道一些特殊操作以及規避問題的原理。
形象的去理解我們可以將BFC看做成一個封閉的盒子，盒子以及盒子內的內容不受盒子外的其它盒子所影響，反之亦然。
BFC的主要作用有以下幾點：
- 邊距重疊
- 不與float box重疊
- 高度塌陷
如何產生BFC？##
為下情況都會讓元素本身產生BFC環境：
· 根元素 (一個頁面的Html標簽應該是唯一的)
· display: inline-block | table-cell | table-caption | flex
· position: absolute | fixed
· overflow: hidden | auto | scroll
· float: left | right
BFC的應用
1. 邊距重疊
邊距重疊對於前端來說是一個很基礎的概念了，這里我就簡單說下其概念與解決方法，圖啊代碼什么的，就略了~
所謂邊距重疊就是當兩個元素垂直邊距相互接觸時，它們將合並形成一個邊距，這個合並后的邊距值就是這兩個邊距值中最大的哪一個。
產生邊距重疊的情形無外乎以下兩個方面：
- 垂直排列的兩個同級元素
- 嵌套的父子元素
解決邊距重疊的方法有很多，但是我認為這些方法最終還是歸於兩種：
防止邊距接觸
既然邊距重疊是發生在邊距相互接觸的情形下，那么我們就可以針對問題的本質，防止兩個元素的邊距發生接觸，比較常見的方法有：
· 添加1px高度的間隔元素
這種添加冗余標簽的方式來解決垂直同級排列的邊距重疊，最好還是不要采用。
· border-top:1px solid transparent
添加1px透明的上邊框，來解決父子元素邊距重疊。
· padding-top:1px
添加1px間距，來解決父子元素邊距重疊。
利用BFC特性
其實，這個才是重點嘛，畢竟本篇文章說的是BFC相關的技能！
不產生邊距重疊的效果本來就是BFC的特性之一，只是我們要根據使用場景進行選擇。
利用BFC防止邊距塌陷：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
width: 300px;
height: 300px;
background: #eee;
margin: 10px;
}
p {
width: 100px;
height: 100px;
background: #aaa;
margin: 20px;
}
.box1 {
overflow: hidden; /* 通過overflow方式形成BFC環境 */
}
.box2 {
display: table-cell; /* 通過display方式形成BFC環境 */
}
.box3 {
position: absolute; /* 通過position方式形成BFC環境 */
}
.box4 {
float: left; /* 通過float方式形成BFC環境 */
margin-top: 320px;
}
</style>
</head>
<body>
<div class="box1"><p>overflow</p></div>
<div class="box2"><p>display</p></div>
<div class="box3"><p>position</p></div>
<div class="box4"><p>float</p></div>
</body>
</html>
不過吧，看了這個DEMO連我自己也感覺通過建立BFC去解決邊距重疊有些不太實際，一是有高射炮打蚊子的嫌疑，明明用padding就可以解決的非要去轉換元素的類型，非要去overflow，二是通過BFC可能會影響頁面的整體排版，畢竟float，absolute有太多的不可控性。
PS：個人認為垂直同級排列的元素邊距實際上不需要去防止邊距重疊，而且防止的話也很簡單，給一個心目中滿意的最大值即可。
2.不與float box重疊
我們知道浮動元素會脫離文檔流，然后浮蓋在文檔流元素上，可以見示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.left{
float: left;
width:200px;
height:500px;
opacity:0.5;
background:#eee;
}
.right{
height:500px;
background:red;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
當一個元素浮動，另一個元素不浮動時，浮動元素因為脫離文檔流就會蓋在不浮動的元素上。
解決這個問題的方法也很簡單，那就是為非浮動元素建立BFC環境，根據BFC的不不與float box重疊的規則，我們可以得知下面DEMO中的情景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.left{
float: left;
width:200px;
height:500px;
opacity:0.5;
background:#eee;
}
.right{
height:500px;
overflow:hidden;
background:red;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
這一特性，我認為還是很有用的，特別是應用在兩欄布局上，對比我們常規為非浮動元素或非定位元素設置margin來擠開的方法，其優點在於不需要去知道浮動或定位元素的寬度。
3.高度塌陷
普通的文檔流元素是無法包含浮動后的元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC</title>
<style>
.box{
border:1px solid #aaa;
}
p{
float: left;
width:50px;
height:50px;
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<p></p>
</div>
</body>
</html>
但是一旦為元素建立BFC環境，那么這個元素就可以識別到浮動元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
display:inline-block;
*zoom:1;
border:1px solid green;
}
p{
float: left;
width:50px;
height:50px;
background:red;
}
</style>
</head>
<body>
<div class="box"><p></p></div>
</body>
</html>
浮動會導致脫離文檔流，從而無法被計算到確切的高度，這種情況我們稱之為高度塌陷。
解決高度塌陷的前提就是能識別並包含到浮動元素。而BFC就有這個特性，所以BFC也可以計算浮動元素的高度。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC</title>
<style>
.box{
border:1px solid #aaa;
overflow:hidden;
}
p{
float: left;
width:50px;
height:50px;
background:#eee;
}
</style>
</head>
<body>
<div class="box">
<p></p>
</div>
</body>
</html>
通過 overflow:hidden將元素轉換為BFC，固然可以解決高度塌陷的問題，但是大范圍的應用在布局上是肯定是行不通的，畢竟overflow會造成溢出隱藏的問題，特別是與JS交互的效果時。
那有沒有一個更好的高度檢測方法呢？
答案是有的，就是我們經常用到的clearfix。
.clearfix:after{
content:'';
display:table;
clear:both
}
.clearfix{
*zoom:1;/* IE6,7不支持BFC，所以需要通過專有的CSS屬性，觸發hasLayout。*/
}
但是我認為這種方式與BFC並沒有直接的關系，chearfix的方法我個人的理解是，當一個普通流的元素因為其內部元素發生了浮動無法包含到內部元素，而導致高度塌陷時，可以在浮動元素的最下面加一個塊級元素，並且該塊級元素本身應用了清除浮動屬性，又因為塊級元素獨占一行的本質，所以該元素會掉落在浮動元素的下面，從而間接導致了父元素能夠重新獲取高度。
總結
看了那么多關於BFC知識的介紹，我個人的感覺是並沒有什么卵用啊...知道它，不知道它，我平日的工作該怎么做，還是這么做，代碼該怎么擼還是這樣擼，要說收獲的話，就是對CSS 盒模型有了更深入一點的了解，以及利用BFC在兩欄自適應布局上的新發現吧。
好了，洗洗睡去了，明天要上班了