BFC(Block Formatting Context, 塊格式化背景關系）它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level box如何布局，并且與這個區域外部毫不相干，
Box是CSS布局的物件和基本單位，直觀點說，就是一個頁面是由很多歌Box組成的，元素的型別和display屬性，決定了這個Box的型別，不同型別的Box，會參與不同的Formatting Context，因此Box內的元素會以不同的方式渲染，
block-level box: display屬性為block， list-item，table的元素，會生成block-level box，并且參與block formatting context，
inline-level box: display屬性為inline，inline-block，inline-table的元素，會生成inline-level box，并且參與inline formatting context，
BFC布局規則：
- 內部的Box會在垂直方向，一個接一個地放置，
- Box垂直方向的距離有margin決定，屬于同一個BFC的兩個相鄰Box的margin會發生重疊
- 每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對于從左往右的格式化，否則相反），即使存在浮動也是如此，
- BFC的區域不會與float box重疊
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，
- 計算BFC的高度時，浮動元素也參與計算
下列方式會創建塊格式化背景關系：
- 根元素(<html>)
- 浮動元素(元素的float不是none)
- 絕對定位元素(元素的position為absolute或fixed)
- 行內塊元素(元素的display為inline-block)
- 表格單元格(元素的display為table-cell)
- 表格標題(元素的display為table-caption)
- 匿名表格單元格元素(元素的display為table、table-row、table-row-group、table-header-group、table-footer-group或inline-table)
- overflow值不為visible的塊元素
- display值為flow-root的元素
- contain值為layout、content和paint的元素
- 彈性元素(display為flex或inline-flex元素的直接子元素)
- 網格元素(display為grid或inline-grid元素的直接子元素)
- 多列容器(元素的column-count或column-width不為auto，包括column-count為1)
- column-span為all的元素始侄訓創建一個新的BFC，即使該元素沒有包裹在一個多列容器中
簡單概括為：
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block、table-cell、table-caption、flex、inline-fex、flow-root
- overflow不為visible
BFC作用及原理
1.自適應兩欄布局
1 <style> 2 body { 3 width: 300px; 4 position: relative; 5 } 6 .aside { 7 width: 100px; 8 height: 150px; 9 float: left; 10 background: #f666; 11 } 12 .main { 13 height: 200px; 14 background: #fcc; 15 } 16 </style> 17 18 <body> 19 <div ></div> 20 <div color: #000000;">main></div> 21 </body>
頁面：
根據BFC規則第三條：
每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對于從左往右的格式化，否則相反），即使存在浮動也是如此，
因此，雖然存在浮動的元素aside，但main的左邊依然會與包含塊的左邊相接觸，
根據BFC布局規則的第四條：
BFC區域不會與float box重疊，
我們可以通過觸發main生成BFC，來實作自適應兩欄布局，
1 .main { 2 overflow: hidden; 3 }
當main生成BFC后，這個新的BFC就不會與浮動元素aside重疊，因此會根據包含塊的寬度，和aside的寬度自動變窄，
2.清除內部浮動
1 <style> 2 .par { 3 border: 5px solid #fcc; 4 width: 300px; 5 } 6 7 .child { 8 border: 5px solid #f66; 9 width: 100px; 10 height: 100px; 11 float: left; 12 } 13 </style> 14 <body> 15 <div > 16 <div ></div> 17 <div ></div> 18 </div> 19 </body>
頁面：
根據BFC布局規則第六條：
計算BFC高度時，浮動元素也參與計算，
為達到清除內部浮動，可以觸發par生成BFC，那么在計算高度時，par內部的浮動元素child也會參與計算，（當然利用一個clearfix的偽類元素也能清除浮動）
1 .par { 2 overflow: hidden; 3 }
效果如下：
3.防止垂直margin重疊（margin塌陷）
<style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align: center; margin: 100px; } </style> <body> <p>Haha</p> <p>Haha</p> </body>
頁面：
兩個p之間的距離為100px,發生了margin重疊，
根據BFC布局規則第二條：
Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰 Box的margin會發生重疊
我們可以在p外面包裹一層容器，并觸發該容器生成一個BFC，那么兩個p便不屬于同一個BFC，就不會發生margin重疊，
1 <style> 2 .wrap { 3 overflow: hidden; 4 } 5 6 p { 7 color: #f55; 8 background: #fcc; 9 width: 200px; 10 line-height: 100px; 11 text-align: center; 12 margin: 100px; 13 } 14 </style> 15 <body> 16 <p>Haha</p> 17 <div > 18 <p>Hehe</p> 19 </div> 20 </body>
效果如下：
總結
其實以上的幾個例子都體現了BFC布局規則第五條：
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之也如此，
因為BFC內部的元素和外部的元素絕對不會互相影響，因此，當BFC外部存在浮動時，它不應該影響BFC內部Box的布局，BFC會通過變窄，而不與浮動有重疊，同樣的，當BFC內部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度，避免margin重疊也是一樣的道理，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/76820.html
標籤：Html/Css
上一篇：手寫滾動條設計----直接粘貼