BFC的概念
BFC全稱Block Formatting Context ，直譯“塊級格式化上下文”，也有譯作“塊級格式化范圍”。它是 W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。通俗的講，就是一個(gè)div內(nèi)部，我們用float和margin布局元素。
BFC布局規(guī)則：
1.內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
2.Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
3.每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
4.BFC的區(qū)域不會(huì)與float box重疊。
5.BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
6.計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
創(chuàng)建一個(gè)BFC
一個(gè)BFC可以被顯式的觸發(fā)。如果想要?jiǎng)?chuàng)建一個(gè)新的BFC，只需要給它添加上面提到的任何一個(gè)CSS樣式就可以了。
例如，請看下面的 HTML ：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div class="container">
Some Content here
</div>
一個(gè)新的BFC可以通過給容器添加任何一個(gè)觸發(fā)BFC的CSS樣式，如 overflow: scroll , overflow: hidden , display: flex , float: left ,或者 display: table 來創(chuàng)建。
display:table 可能會(huì)產(chǎn)生一些問題
overflow:scroll 可能會(huì)顯示不必要的滾動(dòng)條
float:left 將會(huì)把元素置于容器的左邊，其他元素環(huán)繞著它
overflow:hidden 將會(huì)剪切掉溢出的元素
所以每當(dāng)想要?jiǎng)?chuàng)建一個(gè)新的BFC的時(shí)候，我們會(huì)基于我們的需求選擇最好的樣式條件。為了一致性，我在這篇文章所給出的例子中全部使用了 overflow: hidden
CSS Code復(fù)制內(nèi)容到剪貼板
container {
overflow: hidden;
}
你可以自由使用除了 overflow: hidden 之外的樣式聲明。
BFC布局引發(fā)的問題
我們看看BFC布局引發(fā)的問題吧。
例如如下代碼
CSS Code復(fù)制內(nèi)容到剪貼板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear float</title>
<style type="text/css">
.container{
margin: 30px auto;
新聞熱點(diǎn)
疑難解答
圖片精選
