關於BFC

時間 2020-08-30

標籤關於 bfc 简体版

原文原文鏈接

簡介

咱們常說的文檔流其實分爲定位流、浮動流和普通流三種。而普通流其實就是指BFC中的FC。html

FC是formatting context的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何佈局，以及和其餘元素之間的關係和做用。app

常見的FC有BFC、IFC（行級格式化上下文），還有GFC（網格佈局格式化上下文）和FFC（自適應格式化上下文），這裏就再也不展開了。佈局

BFC是什麼？

BFC全稱：Block Formatting Context，BFC翻譯過來就是塊級格式化上下文。post

有人又要問了，那塊級格式化上下文又是什麼呢？flex

BFC是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其餘元素交互的區域。ui

說白了，他就是一個規則。spa

BFC的規則是什麼呢？

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

什麼叫同一個BFC？

BFC包含建立該上下文元素的全部子元素，但不包括建立了新BFC的子元素的內部元素。

 1 <div id='div_1' class='BFC'>
 2     <div id='div_2'>
 3         <div id='div_3'></div>
 4         <div id='div_4'></div>
 5     </div>
 6     <div id='div_5' class='BFC'>
 7         <div id='div_6'></div>
 8         <div id='div_7'></div>
 9     </div>
10 </div>

根據定義，#div_1建立了一個塊格式上下文，這個上下文包括了#div_2、#div_3、#div_4、#div_5。因爲#div_5建立了新的BFC，因此#div_6和#div_7就被排除在外層的BFC以外。翻譯

什麼狀況下觸發BFC？

根元素（<html>）
float不爲none
position爲fixed/absolute
overflow不爲visible
行內元素：display：inline-block
表格元素display:table-cell（表格單元）/table-caption(表格標題)/table-cell/table/table-row/ table-row-group/table-header-group/table-footer-group
彈性元素（display爲 flex 或 inline-flex元素的直接子元素）
網格元素（display爲 grid 或 inline-grid 元素的直接子元素）

BFC的應用

應用一：解決父子margin塌陷

1 <div class="parent">
2    <div class="child"></div>
3 </div>

 1 .parent {
 2     width: 200px;
 3     height: 200px;
 4     background-color: lightcoral;
 5     margin-top: 20px;
 6 }
 7 
 8 .child {
 9     width: 100px;
10     height: 100px;
11     background-color: lightseagreen;
12     margin-top: 40px;
13 }

咱們這樣寫了以後發現父親跟着兒子走了，效果圖以下code

這時候咱們觸發父級BFC（具體觸發方法前面是有的）。orm

在這裏重點說一下爲啥就解決了？

BFC的規則裏說道，處於同一個BFC的兩個相鄰盒子纔會發生margin重疊。打破這個規則那就解決了。但是可能有人疑問，明明父親還包着兒子，這就不是同一個BFC了嗎？具體請看什麼叫同一個BFC😄

其實這裏父親和兒子是不在同一BFC噠

垂直襬放的兩個兄弟盒子，上面設置margin-bottom下面設置margin-top,這時候也會發生margin重疊，這時候咱們選擇只設置一個。

補充一點

margin重疊計算規則

同正取大
同負取小
一正一負取加和值

應用二：浮動模型

當盒子設置float：left/right就變成浮動元素。這些元素站隊邊界是父級邊界。

 1 .father{
 2     border: 5px solid black;
 3     width: 300px;
 4   }  
 5 .son1{
 6     border: 5px solid #f66;
 7     width: 100px;
 8     height: 100px;
 9     float: left;
10 
11 }
12 .son2{
13     border: 5px solid #f66;
14     width:100px;
15     height: 100px;
16     float: left;
17 }

緣由: 浮動元素產生浮動流，全部產生浮動流的元素，塊級元素看不到它們，但產生了bfc的元素和文本元素類屬性（inline）以及文本都能看到浮動元素。解決方案：

清除浮動流

最後一個子元素添加

1 p{
2 clear:both;
3 }

僞元素清除浮動：

1 .father::after {
2     content: '';
3     display: block;
4     clear: both;
5 }

解釋一下爲何要用display:block?

clear 很特殊，想讓他生效，必須是塊級元素才能夠，而::after 是行級元素

觸發父級BFC 內部把元素轉換成inline-block，讓父級元素能夠「看到」浮動元素，從而解決問題。其實是應用到佈局規則中的最後一條特性：計算BFC的高度時，浮動元素也參與計算。

原文地址：https://juejin.im/post/5dede1bee51d4557f3531dfc

1. 關於BFC
2. 關於BFC跟NFC
3. 關於BFC理解
4. 有關BFC
5. 關於BFC佈局的那些事
6. 關於BFC的觸發和特色？
7. 關於BFC的一些思考
8. 關於BFC的一些應用
9. 關於Block Formatting Context－－BFC和IE的hasLayout
10. 關於BFC的簡單理解
更多相關文章...
• Spring基於Annotation裝配Bean - Spring教程
• Spring基於XML裝配Bean - Spring教程
• NewSQL-TiDB相關
• ☆基於Java Instrument的Agent實現

相關標籤/搜索

每日一句

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