2018-5-14 周周
一、什么是BFC
BFC(block formatting context):簡(jiǎn)單來(lái)說(shuō),BFC 就是一種屬性,這種屬性會(huì)影響著元素的定位以及與其兄弟元素之間的相互作用。
中文常譯為塊級(jí)格式化上下文。是 W3C CSS 2.1 規(guī)范中的一個(gè)概念, 從樣式上看,具有 BFC 的元素與普通的容器沒(méi)有什么區(qū)別,但是從功能上,具有 BFC 的元素可以看作是隔離了的獨(dú)立容器,容器里面的元素不會(huì)在布局上影響到外面的元素,并且 BFC 具有普通容器沒(méi)有的一些特性,它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用。
二、如何觸發(fā) BFC
上面介紹了 BFC 的定義,那么如何觸發(fā) BFC 呢?
滿足下面任一條件的元素,會(huì)觸發(fā)為 BFC :
1、浮動(dòng)元素,float 除 none 以外的值
2、絕對(duì)定位元素,position(absolute,fixed)
3、display 為以下其中之一的值 inline-blocks,table-cells,table-captions
4、overflow 除了 visible 以外的值(hidden,auto,scroll)
三、BFC布局與普通文檔流布局區(qū)別
普通文檔流布局規(guī)則
1.浮動(dòng)的元素是不會(huì)被父級(jí)計(jì)算高度
2.非浮動(dòng)元素會(huì)覆蓋浮動(dòng)元素的位置
3.margin會(huì)傳遞給父級(jí)
4.兩個(gè)相鄰元素上下margin會(huì)重疊
BFC布局規(guī)則
1.浮動(dòng)的元素會(huì)被父級(jí)計(jì)算高度(父級(jí)觸發(fā)了BFC)
2.非浮動(dòng)元素不會(huì)覆蓋浮動(dòng)元素位置(非浮動(dòng)元素觸發(fā)了BFC)
3.margin不會(huì)傳遞給父級(jí)(父級(jí)觸發(fā)了BFC)
4.兩個(gè)相鄰元素上下margin會(huì)重疊(給其中一個(gè)元素增加一個(gè)父級(jí),然后讓他的父級(jí)觸發(fā)BFC)
下面來(lái)說(shuō)一下BFC的實(shí)際使用場(chǎng)景
場(chǎng)景1:解決子盒子都浮動(dòng)時(shí) 父盒子高度不參與計(jì)算問(wèn)題
<style>
.far {
border: 10px solid pink;
width: 300px;
}
.child {
border: 10px solid yellowgreen;
width:100px;
height: 100px;
float: left;
}
.far{
overflow: hidden;
}
</style>
<body>
<div class="far">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
根據(jù)overflow 除了 visible 以外的值(hidden,auto,scroll)就會(huì)觸發(fā)BFC的原則 計(jì)算BFC高度時(shí) ,floatbox也參與其中。
場(chǎng)景2:box垂直方向的距離 會(huì)由margin來(lái)決定 相鄰兩個(gè)盒子之間margin會(huì)重疊 ,這就是margin上下間值合并的原因
<style>
p {
color: pink;
background: #fcc;
width: 200px;
height:100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p></p>
<p></p>
</body>
要解決這個(gè)問(wèn)題我們可以在p外面包裹一層容器,并觸發(fā)該容器生成一個(gè)BFC。那么兩個(gè)P便不屬于同一個(gè)BFC,就不會(huì)發(fā)生margin重疊了,解決代碼如下。
<style>
.box {
overflow: hidden;
}
p {
background: green;
width: 200px;
height: 200px;
margin: 100px;
}
</style>
<body>
<p></p>
<div class="box">
<p></p>
</div>
</body>
場(chǎng)景3:實(shí)現(xiàn)左側(cè)固定右側(cè)自適應(yīng)等類(lèi)似布局
<style>
.out{
border: 1px solid red;
height: 200px;
}
.left{
width: 200px;
height: 150px;
background-color: green;
float: left;
}
.right{
background-color: pink;
height: 250px;
overflow: hidden;
}
</style>
<body>
<div class="out">
<div class="left"></div>
<div class="right"></div>
</div>
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com