BFC定義
在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位流、浮動(dòng)流和普通流三種。而普通流其實(shí)就是指BFC中的FC。FC是formatting context的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。常見的FC有BFC、IFC，還有GFC和FFC。BFC是block formatting context，也就是塊級(jí)格式化上下文，是用于布局塊級(jí)盒子的一塊渲染區(qū)域。
個(gè)人理解是：BFC就是一個(gè)有特定規(guī)則的區(qū)域，這塊區(qū)域內(nèi)的元素只遵循特定規(guī)則，不受外部影響。
BFC內(nèi)部規(guī)則。
- 內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。PS:感覺不是廢話么
- Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。
- 每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
- BFC的區(qū)域不會(huì)與float box重疊。
- BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。
相信這5個(gè)東西都看得有點(diǎn)懵~~所以接下來濃縮介紹最常用的規(guī)則整理。
規(guī)則一：BFC是一塊獨(dú)立規(guī)則的區(qū)域，不受外部影響，而內(nèi)部元素也不會(huì)影響到外部。
規(guī)則二：清楚浮動(dòng)。觸發(fā)BFC后能感知得到浮動(dòng)元素的存在。
規(guī)則三：BFC感知得到浮動(dòng)元素的高度。
如何觸發(fā)BFC
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible（常用）
接下來是一些經(jīng)典的應(yīng)用場(chǎng)景。
-
布局的浮動(dòng)清除：規(guī)則二
未觸發(fā)BFC前：
觸發(fā)BFC后：
HTML:
<body>
<div class="header"></div>
<div class="content">
<div class="aside">這是設(shè)置浮動(dòng)的元素</div>
<div class="main"></div>
</div>
<div class="footer"></div>
</body>`
CSS:
.header,.footer{
height:50px;
background:red;
}
.aside{
height:400px;
width:200px;
background:#09f;
font-size:30px;
float:left;
}
.main{
height:200px;
margin-left:200px;
background:pink
}
.content{
overflow:auto;//在父元素觸發(fā)BFC,也可以試試其他的觸發(fā)方式。ps:不過處理起來會(huì)比較麻煩。
//
}
這里我們介紹一下使用BFC清除浮動(dòng)和用clear清除浮動(dòng)的區(qū)別：
clear清除浮動(dòng)：
<style>
.header,.footer{
height:50px;
background:red;
}
.aside{
height:400px;
width:200px;
background:#09f;
font-size:30px;
float:left;
}
.main{
height:200px;
margin-left:200px;
background:pink
}
.clear{
clear:both;
}
</style>
<div class="header"></div>
<div class="content">
<div class="aside">這是設(shè)置浮動(dòng)的元素</div>
<div class="main"></div>
<div class="clear"></div>/*在這里添加一個(gè)clear的空div*/
</div>
<div class="footer"></div>
二者都能達(dá)到浮動(dòng)的效果，不同的是，BFC清除浮動(dòng)是因?yàn)橛|發(fā)到BFC能感知得到浮動(dòng)元素，計(jì)算高度時(shí)候浮動(dòng)元素。而clear清除浮動(dòng)時(shí)候，父元素只計(jì)算到.clear的div的高度，但是.clear感知得到浮動(dòng)元素。當(dāng)我們添加clear:both的時(shí)候，.clear的就被浮動(dòng)元素?cái)D下去了。規(guī)則三
-
清除外邊距。規(guī)則二
未清除邊距合并前：
給其中一個(gè)添加一個(gè)warp并且觸發(fā)warp的BFC：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="content">
<div class="box1"></div>
<div class="warp">
<div class="box2"></div>
</div>
</div>
</body>
</html>`
CSS:
`.box1,.box2{
width:100px;
height:100px;
}
.box1{
background:#09f;
margin-bottom:100px;
}
.box2{
margin-top:100px;
background:pink;
}
.warp{
overflow:auto;
}
PS:對(duì)比的話可以把Html里面的warp去掉試試。
再再PS：外邊距合并有2種，垂直margin的合并，還有父子margin的合并，在這里后者就不演示了可以點(diǎn)擊這里
結(jié)論：
BFC主要就是圍繞這3個(gè)主要規(guī)則去使用。如果對(duì)W3C的理解很困難的話，只需要記住這3個(gè)規(guī)則和觸發(fā)BFC的條件就行~~~
