CSS學習筆記09 簡單理解BFC CSS學習筆記07 盒子模型

時間 2019-12-13

標籤 css 學習筆記簡單理解 bfc 盒子模型欄目 CSS 简体版

原文原文鏈接

引子

在講BFC以前，先來看看一個例子css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>BFC</title>
 6     <style type="text/css">
 7         .div1 {background-color: #FCE38A; width: 200px; height: 100px;}
 8         .div2 {background-color: #EAFFD0; width: 200px; height: 100px;}
 9         .div3 {background-color: #95E1D3; width: 200px; height: 100px;}
10     </style>
11 </head>
12 
13 <body>
14     <div class="div1">div1</div>
15     <div class="div2">div2</div>
16     <div class="div3">div3</div>
17 </body>
18 </html>

能夠看到，塊級元素的排列順序是從上往下，即便所在行的寬度能夠容納多個元素，如今同時給div1與div2添加外邊距html

原本div1的下邊距爲50px，div2的上邊距爲50px，按道理他們之間的距離應爲100px纔對，但是這裏卻只有50px了，這是由於在一個塊級排版上下文中相鄰的兩個塊級盒之間的垂直margin是摺疊的，也就是在CSS學習筆記07 盒子模型中介紹過的外邊距合併，那如何解決這種外邊距合併的現象呢，這個就涉及下面要介紹的BFC了。佈局

什麼是BFC

Block Formatting Contexts 即塊級格式化上下文，它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box（display 屬性爲 block, list-item, table 的元素）如何佈局，而且與這個區域外部絕不相干。其中 Formatting Context 是一個決定如何渲染文檔的容器，Formatting context是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的Formatting context有Block fomatting context(BFC)和Inline formatting context(IFC)。CSS2.1 中只有BFC和IFC, CSS3中還增長了GFC和FFC。post

通俗點說，BFC就是一個獨立的盒子，而且與這個獨立盒子裏的佈局不受外部影響，固然它也不會影響到外面的元素。學習

在文檔呈現開始的時候，會自動建立一個BFC來對整個頁面進行佈局，在沒有建立一個新的BFC的時候，整個文檔就這一個BFC。flex

BFC的規則

內部的box會在垂直方向，從頂部開始一個接着一個地放置（上面的例子能夠看出）
同一個BFC中，在兩個相鄰的塊級元素中，垂直margin會發生摺疊
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)，即便存在浮動也是如此
BFC的區域不會與float box重疊
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然
計算BFC的高度時，浮動元素也參與計算

觸發BFC

根元素
float屬性不爲none（如：left | right）
overflow的值不爲visible（如：hidden | auto | scroll）
display屬性值爲inline-block | flex | inline-flex | table-cell | table-caption
position爲absolute或fixed

應用BFC

解決margin疊加問題

仍是上面的那個例子，由於此時頁面的元素在一個標準流中，因此這個時候body元素就是一個BFC，根據規則url

同一個BFC中，在兩個相鄰的塊級元素中，垂直margin會發生摺疊

如今給div1設置display:inline-block屬性spa

此時因爲div1元素經過display:inline-block觸發了BFC，此時的div1就是一個獨立的BFC了，根據規則3d

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然

因此這時候就不會發生margin重疊了。code

清除內部浮動

當一個標準流中的盒子中全部的子元素都進行了浮動，而且沒有給盒子設置高度時，那麼這個盒子的整個高度就會塌陷，什麼意思呢，看下面的例子

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>BFC清除內部浮動</title>
 6     <style type="text/css">
 7         .child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;}
 8         .parent {width: 300px; border: 1px solid #95E1D3;}
 9     </style>
10 </head>
11 <body>
12     <div class="parent">
13         <div class="child"></div>
14         <div class="child"></div>
15     </div>
16 </body>
17 </html>

父容器的被兩個子div撐起來了，如今給child添加浮動

這個時候，父容器變成了2條重合的線了，也就是高度變爲0了，即所說的高度塌陷。根據規則

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

這時候能夠觸發parent生成BFC，那麼parent在計算高度時，parent內部的浮動元素child也會參與計算

佈局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>BFC佈局</title>
 6     <style type="text/css">
 7         .left {width: 100px; height: 100px; background-color: #FCE38A; float: left;}
 8         .right {width: 300px; height: 150px; background-color: #95E1D3;}
 9 
10     </style>
11 </head>
12 <body>
13     <div class="left"></div>
14     <div class="right"></div>
15 </body>
16 </html>

根據規則

每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)，即便存在浮動也是如此

因此即便left設置了左浮動，right的的左邊依然會與包含塊的左邊（即body）相接觸。接着咱們能夠根據規則

BFC的區域不會與float box重疊

讓right觸發產生BFC，這樣right就不會與left重疊了

這樣就造成了常見的兩列布局。

總之記住一點BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，一樣的，外面的元素也不會影響到容器裏面的子元素。

相關標籤/搜索

每日一句

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