溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)BFC的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于什么是BFC？BFC的深入解析 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
一、什么是BFC
Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。Block formatting context直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。通俗地講，BFC是一個容器，用于管理塊級元素。
二、如何創(chuàng)建BFC
float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block|inline-flex|flex
position為 absolute|fixed
根元素
三、BFC布局規(guī)則：
內(nèi)部的Box會在垂直方向，一個接一個地放置(即塊級元素獨占一行)。
BFC的區(qū)域不會與float box重疊(利用這點可以實現(xiàn)自適應(yīng)兩欄布局)。
內(nèi)部的Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊(margin重疊三個條件:同屬于一個BFC;相鄰;塊級元素)。
計算BFC的高度時，浮動元素也參與計算。（清除浮動 haslayout）
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
四、 BFC有哪些特性
特性1：BFC會阻止垂直外邊距折疊
按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發(fā)生垂直margin的重疊，這個包括相鄰元素或者嵌套元素，只要他們之間沒有阻擋（比如邊框、非空內(nèi)容、padding等）就會發(fā)生margin重疊。
①相鄰兄弟元素margin重疊問題
<style>
p{
color: #fff;
background: #888;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>ABC</p>
<p>abc</p>
</body>
上面例中兩個P元素之間距離本該為200px,然而實際上只有100px,發(fā)生了margin重疊。遇到這種情形，我們?nèi)绾翁幚恚?br/>只需要在p外面包裹一層容器，并觸發(fā)該容器生成一個BFC。那么兩個P便不屬于同一個BFC，就不會發(fā)生margin重疊了。
<style>
p{
color: #fff;
background: #888;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
.wrap{
overflow:hidden;
}
</style>
<body>
<p>ABC</p>
<div class="wrap">
<p>abc</p>
</div>
</body>
②父子元素margin重疊問題
<style>
.box{
width:100px;
height:100px;
background:#ccc;
}
.wrap {
background:yellow;
}
.wrap h2{
background:pink;
margin:40px;
}
</style>
<body>
<div class="box">box</div>
<div class="wrap">
<h2>h2</h2>
</div>
</body>
上圖wrap元素與h2元素之間l理論上本該有個40px的上下margin值,然而實際上父子元素并沒有存在margin值，與此同時，兩個p元素的間距為40px。遇到這種情形，我們?nèi)绾翁幚恚?br/>處理方法其實有很多，在wrap元素中添加:overflow:hidden;或者overflow：auto；使其父元素形成一個BFC；也可以在wrap元素中添加border：1px solid；或是padding：1px；這些都可以有效解決父子元素margin重疊問題。
特性2：BFC不會重疊浮動元素
利用這個特性，我們可以創(chuàng)造自適應(yīng)兩欄布局。
<style>
.box1{
height: 100px;
width: 100px;
float: left;
background: lightblue;
}
.box2{width: 200px;
height: 200px;
background: #eee;
}
</style>
<body>
<div class="box1">我是一個左浮動的元素</div>
<div class="box2">喂喂喂!大家不要生氣嘛，生氣會犯嗔戒的。悟空你也太調(diào)皮了，
我跟你說過叫你不要亂扔?xùn)|西，你怎么又……你看，我還沒說完你就把棍子給扔掉了!
月光寶盒是寶物，你把它扔掉會污染環(huán)境，要是砸到小朋友怎么辦，就算砸不到小朋友，
砸到花花草草也是不對的。</div>
</body>
上圖中，文字圍繞著浮動元素排列，不過在這里，這顯然不是我們想要的。此時我們可以為.box2元素的樣式加上overflow:hidden；使其建立一個BFC,讓其內(nèi)容消除對外界浮動元素的影響。
這個方法可以用來實現(xiàn)兩列自適應(yīng)布局，效果不錯，此時左邊的寬度固定，右邊的內(nèi)容自適應(yīng)寬度。如果我們改變文字的大小或者左邊浮動元素的大小，兩欄布局的結(jié)構(gòu)依然沒有改變！
特性3：BFC可以包含浮動----清除浮動
我們都知道浮動會脫離文檔流，接下來我們看看下面的例子：
<style>
.box1{
width:100px;
height:100px;
float:left;
border: 1px solid #000;
}
.box2{
width:100px;
height:100px;
float:left;
border: 1px solid #000;
}
.box{
background:yellow
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
由于容器內(nèi)兩個div元素浮動，脫離了文檔流，父容器內(nèi)容寬度為零（即發(fā)生高度塌陷），未能將子元素包裹住。解決這個問題，只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設(shè)置overflow:hidden。
感謝各位的閱讀！關(guān)于“BFC的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼