CSS布局基礎(chǔ)BFC

發(fā)布時(shí)間：2016-07-14 17:05:09 作者：佚名

這篇文章主要介紹了CSS布局基礎(chǔ)BFC 的相關(guān)資料,需要的朋友可以參考下

BFC是什么？

第一次看到這個(gè)名詞，我是拒絕的，css什么時(shí)候還有這個(gè)東西？于是迫不及待的google了一下，才發(fā)現(xiàn)原來它無時(shí)無刻不在我們的css當(dāng)中，只不過它并不是一個(gè)屬性，不需要我們平常使用手寫罷了。但是它的重要性確是杠杠的，可以這么說，沒有它就就沒有什么css布局 BFC,全稱 Block Formatting Context，翻譯成塊級(jí)格式化上下文，它就是一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局。

看一大堆文字可能有點(diǎn)抽象，現(xiàn)在拿個(gè)js函數(shù)來比喻說明一下吧，我們現(xiàn)在有一個(gè)叫做bfc的函數(shù)，而一個(gè)函數(shù)就是一個(gè)塊級(jí)作用域，這里面所有的變量申明、運(yùn)行都在這個(gè)塊級(jí)作用域內(nèi)進(jìn)行。理所當(dāng)然，一個(gè)環(huán)境中的變量不會(huì)影響到其它環(huán)境變量。

CSS Code復(fù)制內(nèi)容到剪貼板

var box =1;
function bfc(){
var box = "2";
console.log(box);
}
bfc();//2
console.log(box)//1

所以，我們是不是可以這樣理解：所謂的BFC就是css屬性的執(zhí)行域？

BFC的生成

既然js可以通過函數(shù)等方法來實(shí)現(xiàn)塊級(jí)作用域，我想那css肯定也是可以通過一些手段來實(shí)現(xiàn)BFC的。
這里BFC的官方文檔寫到：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

從這段描述可以清楚知道，以下方法可以創(chuàng)建一個(gè)新的塊級(jí)執(zhí)行上下文（BFC）：

1.浮動(dòng)元素、
2.絕對(duì)定位元素，
3.塊級(jí)元素以及塊級(jí)容器(比如inline-block、table-cell、table-capation)
4.overflow值不為visible的塊級(jí)盒子

當(dāng)然，root元素會(huì)自動(dòng)生成一個(gè)BFC，這個(gè)應(yīng)該很好理解,畢竟需要一個(gè)根BFC來布局

執(zhí)行規(guī)則

既然存在了執(zhí)行環(huán)境，那肯定會(huì)存在執(zhí)行規(guī)則。BFC的

1.在一個(gè)塊級(jí)排版上下文中，盒子是從包含塊頂部開始，垂直的一個(gè)接一個(gè)的排列的。每個(gè)盒子的左外邊是觸碰到包含塊的左邊的（對(duì)于從右向左的排版，則相反）

這個(gè)應(yīng)該不難理解。就是我們?nèi)绻诶飳憥讉€(gè)<div>，它會(huì)依次垂直排列，并且都是在頁(yè)面的最左邊（對(duì)于從右向左的排版，則相反）。

2.相鄰兩個(gè)盒子之間的垂直的間距是被margin屬性所決定的，在一個(gè)塊級(jí)排版上下文中相鄰的兩個(gè)塊級(jí)盒之間的垂直margin是折疊的。

這句描述是不是超級(jí)熟悉，這不是我css常見的邊距折疊問題嗎？現(xiàn)在知道它出自哪里了吧，就是這里。下面的倆個(gè)盒子各有上下20px的間距，加起來應(yīng)該有40px,但顯然，現(xiàn)在只有20px;

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
.top{
width:100px;
height:100px;
background:#000;
margin:20px 0;
}
.bottombottom{
width:100px;
height:100px;
background:#000;
margin:20px 0;
}
</style>
<div class="top"></div>
<div class="bottom"></div>

發(fā)生邊距折疊是因?yàn)橥粋€(gè)BFC的關(guān)系(根BFC)。既然知道原因，解決就好辦了，讓他們倆個(gè)不在同一個(gè)BFC就ok啦。
3. BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。

通過這條屬性，我們又可以想到哪些呢。對(duì)，浮動(dòng)元素的塌陷問題。我們知道，一個(gè)元素中的子元素浮動(dòng)了，這個(gè)父元素就會(huì)發(fā)生高度塌陷問題。下例中一旦內(nèi)部的紅色元素浮動(dòng)，藍(lán)色的盒子就無法被撐起，高度會(huì)變成0。

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
.wrap{
width:150px;
background:#ADD9E6;
margin:20px 0;
}
.in{
width:100px;
height:100px;
background:#FFCCCC;
margin:20px 0;
//float:left;
}
</style>
<div class="wrap"><div class="in"></div></div>

現(xiàn)在我們知道了，這是因?yàn)楦?dòng)元素創(chuàng)建了一個(gè)新的BFC，成為了一個(gè)獨(dú)立的容器，不會(huì)影響到外面的父元素了。它的定位規(guī)則不再受制于這個(gè)父元素了。如何解決這一問題？我們知道只要在在父元素加上overflow:hidden可以清除浮動(dòng)。但是這又是為什么？

其實(shí)，這就是前面提到的overflow:hidden可以生成一個(gè)新的BFC，而這個(gè)浮動(dòng)的子元素，被它所包含了，從而成為一個(gè)獨(dú)立容器，它的float外溢不了了，外面的元素不再受其浮動(dòng)的影響，從而達(dá)到了清除浮動(dòng)的作用。