BFC
一.定義
BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。瀏覽器
Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。ide
二. 觸發 BFC
- body
- 根元素
- 浮動元素：float 除 none 之外的值
- 絕對定位元素：position (absolute、fixed)
- display 爲 inline-block、table-cells、flex
overflow 除了 visible 之外的值 (hidden、auto、scroll)佈局
但其中，最多見的就是overflow:hidden、float:left/right、position:absolute。也就是說，每次看到這些屬性的時候，就表明了該元素以及建立了一個BFC了。flex
三. 使用場景
1.利用BFC避免外邊距摺疊
兩元素之間的間距只有100px，也就是重疊了。
若是想要避免外邊距的重疊，能夠將其放在不一樣的 BFC 容器中。
<style>
.bfc {
overflow: hidden;
}
.bfc div {
width: 100px;
height: 100px;
background:aqua;
margin: 100px;
}
</style>
<body>
<div class="bfc">
<div></div>
</div>
<div class="bfc">
<div></div>
</div>
</body>
2.BFC 清除浮動
浮動元素是會脫離文檔流的(絕對定位元素會脫離文檔流)。若是一個沒有高度或者height是auto的容器的子元素是浮動元素，則該容器的高度是不會被撐開的。咱們一般會利用僞元素(:after或者:before)來解決這個問題。BFC能包含浮動，也能解決容器高度不會被撐開的問題。
<style>
.container {
border: 2px solid rebeccapurple;
}
.container div {
width: 100px;
height: 100px;
background:aqua;
margin: 10px;
float: left;
}
</style>
<body>
<div class="container">
<div></div>
<div></div>
</div>
<div class="bfc">
<div></div>
</div>
</body>
在上面這個例子中，容器沒有任何高度，而且它包不住浮動子元素，容器的高度並不會被撐開。爲解決這個問題，能夠在容器中建立一個BFC：
.container { overflow: hidden; border: 2px solid rebeccapurple; }orm
3. 使用BFC避免文字環繞
.container {
width:300px;
}
.floated {
float: left;
width:50px;
height: 50px;
background: red;
}
<div class="container">
<div class="floated">
Float
</div>
<p>
jaaahahhahahhaha Quae hic ut ab perferendis sit quod architecto,
dolor debitis quam rem provident aspernatur tempora
expedita.
</p>
</div>
p 元素沒有移位但它疊在了浮動元素之下，而p元素的文本(行盒子)卻移位了，行盒子水平變窄來給浮動元素騰出了空間。隨着文本的增長，最後文本將環繞在浮動元素之下，由於那時候行盒子再也不須要移位，也就成了圖中的樣子。
此時只要把p設置成BFC 就能夠避免文字環繞blog
4. 全屏多列布局防止瀏覽器屬性換行
若是咱們建立一個佔滿整個容器寬度的多列布局，在某些瀏覽器中最後一列有時候會掉到下一行。這多是由於瀏覽器四捨五入了列寬從而全部列的總寬度會超出容器。但若是咱們在多列布局中的最後一列裏建立一個新的BFC，它將老是佔據其餘列先佔位完畢後剩下的空間rem
<div class="container">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
</div>
.column {
width: 31.33%;
background-color: yellowgreen;
float: left;
margin: 0 1%;
}
最後一個元素用BFC文檔
.column:last-child {
float: none;
overflow: hidden;
}
-
每一个你不满意的现在，都有一个你没有努力的曾经。