CSS中的BFC
一、什麼是BFC
程式設計師自我修養
Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域,並且有一套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關係和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。Block formatting context直譯為"塊級格式化上下文"。它是一個獨立的渲染區域,只有Block-level box參與, 它規定了內部的Block-level Box如何佈局,並且與這個區域外部毫不相干。
二、如何建立BFC
①float為 left|right
②overflow為 hidden|auto|scroll
③display為 table-cell|table-caption|inline-block
④position為 absolute|fixed
三、 BFC有哪些特性
特性1:BFC會阻止垂直外邊距摺疊
按照BFC的定義,只有同屬於一個BFC時,兩個元素才有可能發生垂直margin的重疊,這個包括相鄰元素或者巢狀元素,只要他們之間沒有阻擋(比如邊框、非空內容、padding等)就會發生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>
頁面展示
相鄰兄弟元素margin重疊問題
上圖兩個P元素之間距離應該為200px,然而實際上只有100px,發生了margin重疊。
bug如何修補
只需要在p外面包裹一層容器,並觸發該容器生成一個BFC。那麼兩個P便不屬於同一個BFC,就不會發生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>
頁面展示
bug修補後
②父子元素margin重疊問題
程式碼
<style>
.box{
width:100px;
height:100px;
background:#ccc;
}
.wrap {
background:yellow;
}
.wrap h1{
background:pink;
margin:40px;
}
</style>
<body>
<div class="box">box</div>
<div class="wrap">
<h1>h1</h1>
</div>
</body>
頁面展示
父子元素margin重疊問題
上圖wrap元素與h1元素之間l理論上應該有個40px的上下margin值,然而實際上父子元素並沒有存在margin值,與此同時,兩個div元素之間的間距為40px。
bug如何修補
方法有很多,在wrap元素中新增:overflow:hidden;或者overflow:auto;使其父元素形成一個BFC;也可以在wrap元素中新增border:1px solid;或是padding:1px;這些都可以有效解決父子元素margin重疊問題。
bug修補後
特性2:BFC不會重疊浮動元素
利用這個特性,我們可以創造自適應佈局。
程式碼
<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">喂喂喂!大家不要生氣嘛,生氣會犯嗔戒的。悟空你也太調皮了,
我跟你說過叫你不要亂扔東西,你怎麼又……你看,我還沒說完你就把棍子給扔掉了!
月光寶盒是寶物,你把它扔掉會汙染環境,要是砸到小朋友怎麼辦,就算砸不到小朋友,
砸到花花草草也是不對的。</div>
</body>
頁面展示
文字圍繞浮動元素排列
上圖中,文字圍繞著浮動元素排列,如果我們想要讓其內容消除對外界浮動元素的影響,就要給文字加上overflow:hidden;
自適應佈局
這個方法可以用來實現兩列自適應佈局,效果不錯,此時左邊的寬度固定,右邊的內容自適應寬度。如果我們改變文字的大小或者左邊浮動元素的大小,兩欄佈局的結構依然沒有改變!
特性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>
頁面展示
出現bug
由於容器內兩個div元素浮動,脫離了文件流,父容器內容寬度為零(即發生高度塌陷),未能將子元素包裹住。解決這個問題,只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設定overflow:hidden。
修補後頁面展示
修補後