BFC對於佈局的幫助

時間 2019-11-17

標籤 bfc 對於佈局幫助简体版

原文原文鏈接

　　前幾天在園子裏看文章的時候看到了BFC這個概念，對於小白的我來講那是至關的陌生，因而就百度了一下。結果仍是有不少的，看來並不算是一個冷僻的知識。因而來總結一下搜索到的一些結果和理解。css

　　那麼，什麼事BFC呢？BFC是塊級格式化上下文（Block Formatting Context）的簡寫，用來規範塊級容器的佈局方式。主要的特性是有如下幾點：佈局

　　　　1.隔絕空間。使BFC內外的佈局不會相互影響（我的猜想，在寫一些ui控件的時候是否是應該將嘴歪層設置一個BFC，但願哪位大神給講解一下）ui

　　　　2.BFC內的元素從上至下一次排列，儘量的高級上方(同級元素在垂直方向上的margin會存在塌陷，這個問題之前常常碰到，一直認爲是個bug)，水品方向的排列spa

　　　　 方向由你的水平對齊方式決定，子元素的margin和緊貼着BFC的bordercode

　　　　3.BFC的區域不會同浮動元素的區域疊加orm

　　　　4.BFC的區域在計算高度時會計算其內浮動元素的高度blog

　　說了這麼多的特性，那麼怎樣去創建一個BFC呢？從w3c的介紹裏能夠獲得：　　　　utf-8

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.ci

　　大概的意思是：浮動元素，絕對定位元素，非塊級盒子的塊級容器（如inline-block,table-cells,以及table-caption）和overflow不爲visible的塊級盒子都會爲其子元素創建一個BFC。用代碼就是：element

　　　　float:left|right;

　　　　position:absolute|fixed;

　　　　display:inline-block|table-cells|table-captions;

　　　　overflow:hidden;

　　那麼還有一個問題要註明是非塊級盒子的塊級容器呢？既然是塊級格式化上下文，爲何不包含塊級盒子？個人理解是，在一個頁面中，以塊級盒子居多，特別是div+css佈局的時候，整個頁面可能有上百個塊級盒子，這樣整個頁面就被分紅了上百個BFC。因爲BFC有內外隔離的特性，反而會致使佈局上更加困難？

　　講了一大堆的理論，到底BFC有什麼用？能解決什麼問題？這個纔是咱們最關注的東西（俗話說，不能解決問題的理論都是扯**蛋）。我知道的就是兩個，其餘的歡迎你們來補充：

　　1.清楚浮動

　　　　根據 BFC的區域在計算高度時會計算其內浮動元素的高度 以及 BFC隔絕內外佈局 的特性（我猜的…）能夠知道，當BFC內有浮動元素而且浮動元素的高度高於其餘全部元素時，BFC的高度等於浮動元素的高度。爲了方便說明，來上個圖吧

　　這張是在未建立BFC時的狀態，對應的代碼是：

<head>
　　<meta charset="utf-8">
　　<title>BFC</title>
　　<style>
　　　　.bfc{ margin: 100px 0;background: #777;overflow: hidden; }
　　　　.float{ float: left;width: 100px;height: 200px;background: green;opacity: .6;color: white; }            
　　　　.default{ width: 300px;height: 100px;background: red; }
　　</style>
</head>
<body>
　　<div class="bfc">
　　　　<div class="float">float</div>
　　　　<div class="default">default</div>
　　</div>
</body>

　　能夠看到，外層的.bfc的高度等於.default的高度，浮動元素並未被計算在內，致使了高度的塌陷。

　　再來看看這張，在外層.fbc上建立了BFC以後的效果

.bfc{ margin: 100px 0;background: #777;overflow: hidden; }

　　此時，浮動唄清除，.float的高度被計算在.bfc內。之前一直不明白爲何overflow能夠清除浮動，其實就是由於BFC的幫助。

　　2.解決子元素與父元素間margin失效的問題

　　先看下面這段代碼　　

 1 <head>
 2     <meta charset="utf-8">
 3     <title>BFC</title>
 4     <style>
 5         .bfc{ width: 200px;height:200px;margin: 10px auto; background: #ddd}
 6         .bfc>div{ width: 100px;height:100px;margin:50px;background: green }            
 7     </style>
 8 </head>
 9 <body>
10     <div class="bfc">
11         <div></div>
12     </div>
13 </body>

　　你以爲效果是什麼？這樣嗎？

　　咋一看好像是的，可是結果呢？

　　這個纔是正確答案，爲何？咱們從BFC的特性中去看看。BFC中的元素在垂直方向上會盡量的往上方貼近，因而子元素的margin-top緊貼着父元素的border-top，致使父子元素之間的margin消失了。這個問題我在之前常常碰到，當時的解決方案是用padding代替margin，可是仍是會有一些小問題，好比我想給子元素一個border-bottom,可是border-bottom的寬度會貫穿整個父元素。最後的替代解決方案是父元素使用用margin和padding，而子元素什麼都不設置。在看完BFC以後明白，只要在父元素上設置overflow：hidden爲其建立BFC以後問題就解決了。

　　好了。我所瞭解的BFC就是這樣的，可能還有不少特性我不知道，再次歡迎高手指正。

　　看一下時間… 寫了1個多小時，看看文章好像並不長的樣子。應該是第一次寫的緣由吧！！休息一會，能夠吃午餐了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。