對BFC的深層理解

時間 2020-03-01

標籤 bfc 深層理解简体版

原文原文鏈接

BFC（Block Formatting Context）塊級格式化上下文

注意：BFC首先是塊，其次須要具有下面的條件之一才能夠（通俗來講，BFC就比如一所985或者211的高校，想要成爲985或者211的高校，它是有前提條件的，首先他得是一所大學，不能拿一個小學來講，就比如BFC得先是塊，纔是BFC；當知足了前提條件，再須要具有其餘的條件才能夠。）css

在正式說BFC具體內容以前，先說一下Box和Formatting Context是個什麼東西：html

Box：你們應該都不陌生，Box是CSS佈局的對象和基本單位，直觀點說就是一個頁面是由不少個Box組成的。不一樣類型的Box，會參與不一樣的Formatting Context（一個決定如何渲染文檔的容器），所以Box內的元素會以不一樣的方式來渲染。前端

常見盒子類型：瀏覽器

block-level box：display 屬性爲block, list-item, table 的元素，會生成block-level box。而且參與block fomatting context。
inline-level box：display屬性爲 inline, inline-block, inline-table 的元素，會生成inline-level box。而且參與inline fomatting context。
run-in box：CSS3中新增的，是一個塊/行內元素混合，可使某些塊級元素成爲下一個元素的行內部分，目前不多有瀏覽器支持該元素。

Formatting context：佈局

Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。flex

常見的Formatting context：spa

Block Formatting Context（簡稱BFC）
Inline Formatting Context（簡稱IFC）
CSS2.1 中只有BFC和IFC, CSS3中還增長了GFC和FFC。

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與建立BFC，它規定了內部的Block-level Box如何佈局，而且與這個獨立盒子裏的佈局不受外部影響，固然也不會影響到外面的元素。3d

BFC的觸發條件：

1. 根元素（當前文檔中 html 標籤就是一個BFC）
2. float 的值不爲 none
3. overflow 的值不爲 visible（有 hidden，auto，scroll）
4. display 的值爲 inline-block / table-cell / table-caption / flex / inline-flex
5. position 的值爲 absolute 或 fixedcode

BFC的特性（優勢）以及應用場景

一、box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰box的margin會發生重疊

應用場景：能夠解釋爲何margin上下會重疊，以及解決方法的緣由

問題分析：默認狀況下，兩個相鄰的box的margin會發生重疊的緣由，是由於box1和box2都屬於html，而html是BFC。BFC裏面規定了，屬於同一個BFC的兩個相鄰box的margin會發生重疊，因此box1和box2重疊了，也就是外邊距重疊。

默認狀況下，兩個相鄰的box的margin會發生重疊：orm

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             body{margin: 0;padding: 0;}
 8             .box1{width: 300px;height: 300px;background: red;margin-bottom: 50px;}
 9             .box2{width: 400px;height: 400px;background: yellow;margin-top: 100px;}
10         </style>
11     </head>
12     <body>
13         <div class="box1"></div>
14         <div class="box2"></div>    
15     </body>
16 </html>

如圖所示：

重疊以後，想要不重疊，能夠給後面的元素添加一個父元素而且添加聲明overflow: hidden;來解決（添加其餘聲明也能夠，只要能夠觸發BFC便可）
能夠解決的緣由是由於，當給box2添加了父元素而且添加了overflow:hidden;以後，這個父元素boxs就是BFC了，當前的結構裏面box1屬於BFC html，box2屬於BFC boxs，這個時候box1和box2就不屬於同一個BFC了，那麼也就不會發生重疊了。

具體代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             body{margin: 0;padding: 0;}
 8             .box1{width: 300px;height: 300px;background: red;margin-bottom: 50px;}
 9             .box2{width: 400px;height: 400px;background: yellow;margin-top: 100px;}
10             .boxs{overflow: hidden;}  
11         </style>
12     </head>
13     <body>
14         <div class="box1"></div>
15         <div class="boxs">
16             <div class="box2"></div>
17         </div>
18     </body>
19 </html>

如圖所示：實現效果：（給box2添加父元素並聲明觸發BFC便可解決）

二、計算BFC的高度時，浮動元素也參與計算

應用場景：能夠解釋爲何高度塌陷能夠用overflow：hidden等方法解決

分析：爲何添加了overflow:hidden;就能夠解決高度塌陷，是由於添加了以後，就觸發ul爲BFC，而BFC裏面規定了，計算BFC高度的時候，浮動元素也參與計算。

ul未觸發BFC時，li浮動時，ul高度塌陷：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             body,ul{margin: 0;padding: 0;}
 8             ul{border: 3px solid red;}
 9             ul li{float: left;list-style: none;border: 1px solid yellow;}
10         </style>
11     </head>
12     <body>
13          <ul>
14          <li>浮動元素</li>
15          <li>浮動元素</li>
16          <li>浮動元素</li>
17          <li>浮動元素</li>
18          </ul>
19     </body>
20 </html>

如圖所示：

當給ul添加了overflow：hidden；以後，就觸發了ul爲BFC，而計算BFC高度的時候，浮動元素也參與計算：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             body{margin: 0;padding: 0;}
 8             ul{border: 3px solid red;overflow: hidden;}
 9             ul li{float: left;list-style: none;border: 1px solid yellow;}
10         </style>
11     </head>
12     <body>
13          <ul>
14          <li>浮動元素</li>
15          <li>浮動元素</li>
16          <li>浮動元素</li>
17          <li>浮動元素</li>
18          </ul>
19     </body>
20 </html>

如圖所示：

overflow：auto，scroll或者display：flex，inline-flex，table；等均可以解決高度塌陷，也是由於觸發了ul爲BFC

三、BFC的區域不會與float box發生重疊

應用場景：自適應兩欄佈局或者三欄佈局

分析：上面的一個元素浮動，下面的一個元素沒有浮動，那麼會發生重疊，緣由是由於浮動以後不佔據位置，因此後面的元素會上去
當給下面的元素添加了float、overflow、display的時候就不重疊了，緣由是由於給了這些聲明以後，就觸發了下面的元素爲BFC，而BFC裏面規定了，BFC區域不會與浮動盒子發生重疊。
若是既要BFC區域不會與float box發生重疊，又要右邊的容器自適應：
float不能夠，
overflow：hidden、auto、scroll；能夠，
display：flex、inline-flex；能夠。

當上面元素設置浮動，下面元素沒有浮動，那麼就會發生重疊：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             .left {width: 300px;height: 300px;background: red;float: left;}
 8             .right {height: 400px;background: yellow;}
 9         </style>
10     </head>
11     <body>
12         <div class="left">left</div>
13         <div class="right">right</div>
14     </body>
15 </html>

如圖所示：

當下面元素添加聲明，觸發BFC，就不會與浮動盒子發生重疊：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             .left {width: 300px;height: 300px;background: red;float: left;}
 8             .right {height: 400px;background: yellow;overflow: hidden;}
 9         </style>
10     </head>
11     <body>
12         <div class="left">left</div>
13         <div class="right">right</div>
14     </body>
15 </html>

如圖所示

應用：自適應兩欄佈局

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             body,ul,ol{ margin: 0; padding: 0;}
 8             html,body{height: 100%;}
 9             .left{width: 300px;height:500px;background: #0000FF;float: left;} 
10             .right{height: 600px;background: yellow;overflow: hidden;}
11         </style>
12     </head>
13     <body>
14         <div class="left">left固定</div>
15         <div class="right">right自適應</div>
16     </body>
17 </html>

實現效果如圖所示：

能夠實現右側自適應的方法屬性有：

overflow: hidden、auto、scroll;

display: flex、inline-flex;

應用：三欄佈局

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             body{ margin: 0; padding: 0;}
 8             html,body{height: 100%;}
 9             .left{
10                 width: 100px;height: 200px;background: red;float: left;
11             }
12             .center{
13                 height: 400px;background: #00FFFF;overflow: hidden;margin-right: 200px;
14             }
15             .right{
16                 width: 200px;height: 300px;background: #008000;float: left;position: absolute;top: 0;right: 0;
17             } 
18         </style>
19     </head>
20     <body>
21         <div class="left">left</div>
22         <div class="center">center</div>
23         <div class="right">right</div>
24     </body>
25 </html>