BFC定義
在解釋BFC之前罐韩，先說一下文檔流龙考。我們常說的文檔流其實分為定位流晦款、浮動流和普通流三種缓溅。而普通流其實就是指BFC中的FC坛怪。FC是formatting context的首字母縮寫更啄，直譯過來是格式化上下文锈死，它是頁面中的一塊渲染區(qū)域其屏，有一套渲染規(guī)則川背，決定了其子元素如何布局熄云，以及和其他元素之間的關(guān)系和作用缴允。常見的FC有BFC锈候、IFC泵琳，還有GFC和FFC获列。BFC是block formatting context歌懒，也就是塊級格式化上下文及皂，是用于布局塊級盒子的一塊渲染區(qū)域验烧。
個人理解是：BFC就是一個有特定規(guī)則的區(qū)域碍拆，這塊區(qū)域內(nèi)的元素只遵循特定規(guī)則端幼，不受外部影響弧满。
BFC內(nèi)部規(guī)則。
- 內(nèi)部的Box會在垂直方向滑进，一個接一個地放置扶关。PS:感覺不是廢話么
- Box垂直方向的距離由margin決定节槐。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊疯淫。
- 每個元素的margin box的左邊戳玫， 與包含塊border box的左邊相接觸(對于從左往右的格式化咕宿，否則相反)缆镣。即使存在浮動也是如此。
- BFC的區(qū)域不會與float box重疊董瞻。
- BFC就是頁面上的一個隔離的獨立容器钠糊，容器里面的子元素不會影響到外面的元素抄伍。反之也如此。
計算BFC的高度時攀甚，浮動元素也參與計算秋度。
相信這5個東西都看得有點懵~~所以接下來濃縮介紹最常用的規(guī)則整理静陈。
規(guī)則一：BFC是一塊獨立規(guī)則的區(qū)域诞丽，不受外部影響僧免，而內(nèi)部元素也不會影響到外部懂衩。
規(guī)則二：清楚浮動。觸發(fā)BFC后能感知得到浮動元素的存在胡岔。
規(guī)則三：BFC感知得到浮動元素的高度法希。
如何觸發(fā)BFC
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible（常用）
接下來是一些經(jīng)典的應(yīng)用場景。
-
布局的浮動清除：規(guī)則二
未觸發(fā)BFC前：
觸發(fā)BFC后：
HTML:
<body>
<div class="header"></div>
<div class="content">
<div class="aside">這是設(shè)置浮動的元素</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:不過處理起來會比較麻煩苫亦。
//
}
這里我們介紹一下使用BFC清除浮動和用clear清除浮動的區(qū)別：
clear清除浮動：
<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è)置浮動的元素</div>
<div class="main"></div>
<div class="clear"></div>/*在這里添加一個clear的空div*/
</div>
<div class="footer"></div>
二者都能達(dá)到浮動的效果，不同的是怨咪，BFC清除浮動是因為觸發(fā)到BFC能感知得到浮動元素屋剑，計算高度時候浮動元素。而clear清除浮動時候诗眨，父元素只計算到.clear的div的高度唉匾，但是.clear感知得到浮動元素。當(dāng)我們添加clear:both的時候匠楚，.clear的就被浮動元素擠下去了巍膘。規(guī)則三
-
清除外邊距。規(guī)則二
未清除邊距合并前：
給其中一個添加一個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:對比的話可以把Html里面的warp去掉試試。
再再PS：外邊距合并有2種，垂直margin的合并茉帅，還有父子margin的合并味滞，在這里后者就不演示了可以點擊這里
結(jié)論：
BFC主要就是圍繞這3個主要規(guī)則去使用。如果對W3C的理解很困難的話，只需要記住這3個規(guī)則和觸發(fā)BFC的條件就行~~~
