前言
關(guān)于BFC女蜈，很多人可能很熟悉验烧，但有些人可能第一次聽說板驳。對(duì)于熟悉的人無妨也可以溫習(xí)一下查缺補(bǔ)漏。對(duì)于還不是很了解的人認(rèn)真閱讀完后碍拆，應(yīng)該都能夠比較深入的理解BFC這個(gè)概念若治、作用以及用法。希望對(duì)大家有所收獲感混。
BFC是什么端幼？
BFC全稱為 block formatting context，中文為“塊級(jí)格式化上下文”弧满。它是一個(gè)獨(dú)立的渲染區(qū)域,規(guī)定了內(nèi)部如何進(jìn)行布局婆跑，并且內(nèi)外部的元素之間互不影響。相對(duì)應(yīng)的還有 IFC庭呜， 也就是inline formatting context滑进，中文為“內(nèi)聯(lián)格式化上下”。它不是本文的重點(diǎn)募谎，感興趣的童鞋可以自行查閱了解扶关。
如何形成BFC？
-
<html>根元素 -
float的值不為none -
overflow的值為auto近哟、scroll或hidden -
display的值為table-cell驮审、table-caption和inline-block中的任何一個(gè) -
position的值不為relative和static
其中，最常見的就是overflow:hidden、float:left/right疯淫、position:absolute地来。也就是說，每次看到這些屬性的時(shí)候熙掺，就代表了該元素以及創(chuàng)建了一個(gè)BFC了未斑。
BFC作用有哪些？
- 利用
BFC可以阻止垂直外邊距重疊 - 利用
BFC可以清除浮動(dòng) - 利用
BFC進(jìn)行自適應(yīng)布局 - 利用
BFC可以阻止被浮動(dòng)元素覆蓋
BFC有什么特性币绩？
特性1: BFC中元素會(huì)在垂直方向蜡秽，從頂部開始一個(gè)接一個(gè)地放置。
我們平常說的盒子是由
margin缆镣、border芽突、padding、content 組成的董瞻，實(shí)際上每種類型的四條邊定義了一個(gè)盒子寞蚌，如圖分別是content box、padding box钠糊、border box挟秤、margin box，這四種類型的盒子一直存在抄伍，即使他們的值為0艘刚。而決定塊盒在包含塊中與相鄰塊盒的垂直間距的便是margin-box。從頂部一個(gè)接一個(gè)放置可以理解為平時(shí)div一行一行塊級(jí)放置的樣式截珍。
特性2: BFC中兩相鄰元素會(huì)發(fā)生折疊
元素垂直方向的距離由
margin決定攀甚。屬于同一個(gè)BFC的兩個(gè)相鄰元素的margin會(huì)發(fā)生疊加
實(shí)例代碼如下：
<p>ABC</p>
<p>abc</p>
p {
color: #fff;
background: #f66;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
效果圖：
上面例子中兩個(gè)P之間的距離本該為100px，然后實(shí)際卻為50px岗喉，主要原因是發(fā)生了margin折疊了云稚。如果遇到這種情況，只需要將兩個(gè)P給其中一個(gè)P外面包一個(gè)div沈堡，然后通過觸發(fā)外面這個(gè)div的BFC静陈，就可以阻止這兩個(gè)P的margin重疊。即利用BFC可以阻止垂直外邊距重疊诞丽。
特性3: BFC中父子之間是margin box與border box左邊相接觸鲸拥。
每個(gè)元素的
margin box的左邊，與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化僧免，否則相反)刑赶。即使存在浮動(dòng)也是如此。
實(shí)例代碼如下：
<div class="wrap">
<div class="child">ABC</div>
</div>
.child {
color: #fff;
background: #f66;
width: 200px;
line-height: 50px;
text-align:center;
}
.wrap {
float: left;
border: 10px solid #fcc;
margin: 50px;
}
效果圖：
給子
div加浮動(dòng)懂衩，浮動(dòng)的結(jié)果撞叨，如果沒有清除浮動(dòng)的話金踪，父div不會(huì)將子div 包裹，但還是在父div的范圍之內(nèi)牵敷，子div的兩邊邊接觸父div的border box 的兩邊胡岔，除非設(shè)置margin來撐開距離，否則一直是這個(gè)規(guī)則枷餐。
特性4: BFC的區(qū)域不會(huì)與float box疊加靶瘸。
實(shí)例代碼如下：
<div class="aside"></div>
<div class="wrap">
<div class="child"></div>
</div>
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.child {
height: 200px;
overflow: hidden; //觸發(fā)main盒子的BFC
background: #fcc;
}
.wrap {
width: 500px;
}
效果圖：
上面
aside盒子有一個(gè)浮動(dòng)屬性，覆蓋了child盒子的內(nèi)容毛肋，child盒子沒有清除 aside盒子的浮動(dòng)怨咪。只做了一個(gè)動(dòng)作，就是觸發(fā)自身的BFC润匙，然后就不再被aside 盒子覆蓋了诗眨。所以，BFC的區(qū)域不會(huì)與float box重疊孕讳。即利用BFC可以阻止被浮動(dòng)元素覆蓋
特性5: BFC內(nèi)外元素互不影響
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器辽话，容器里面的子元素不會(huì)影響到外面的元素，反之亦然卫病。
實(shí)例代碼如下：
<div class="main">
<div class="child">ABC</div>
</div>
<div class="wrap">
<p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p>
</div>
.wrap {
height: 200px;
background: #AAA;
}
.main {
float: left;
width: 100px;
height: 100px;
background: #f66;
}
.child {
color: #fff;
padding-left: 200px;
line-height: 50px;
}
效果圖：
上面例子中，
main盒子形成了BFC,BFC是一個(gè)獨(dú)立的渲染區(qū)域里面ABC元素不管如何的位移變化都不會(huì)影響到外元素典徘。
特性6: 計(jì)算BFC的高度時(shí)蟀苛，浮動(dòng)元素也參與計(jì)算。
實(shí)例代碼如下：
<div class="wrap">
<div class="child">ABC</div>
<div class="child">abc</div>
</div>
.wrap {
overflow: hidden;
width: 250px;
border: 5px solid #f66;
}
.child {
float: left;
width: 100px;
border: 5px solid #fcc;
line-height: 100px;
}
效果圖：
上面例子可以看出逮诲，為達(dá)到清除內(nèi)部浮動(dòng)帜平，我們可以觸發(fā)
wrap生成BFC，即利用BFC來清除浮動(dòng)梅鹦。那么wrap在計(jì)算高度時(shí)裆甩，wrap內(nèi)部的浮動(dòng)元素child也會(huì)參與計(jì)算。
最后
如果本文對(duì)你有所幫助齐唆，歡迎點(diǎn)贊關(guān)注｀退ā！箍邮！大家加油茉帅。。
更多優(yōu)質(zhì)文章可以訪問GitHub博客锭弊，歡迎帥哥美女前來Star？芭臁！味滞！
