有關BFC

時間 2020-08-30

標籤有關 bfc 简体版

原文原文鏈接

師傅今天的每日一題是BFC，而後我就屁顛屁顛過去查了。只是查的資料上的一些內容，BFC在應用中頻繁遇到。

第一，先了解什麼是BFC（Box Formatting context),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 block。並參與inline formatting context.

Foematting context是一面中一塊渲染區域，並有一套渲染規則，他決定了其子元素如何定位，以及和其餘元素的關係和相互做用。

BFC 譯爲塊級格式化上下文，他是一個獨立的渲染區域，他規定了內部的block-level box 如何佈局，而且與這個區域外部絕不相干。

BFC佈局規則：

1，內部的box會在垂直方向，一個接一個放置。

2,box垂直方向的距離有margin決定。屬於同一個BFC的兩個相鄰的margin會發生重疊。

3，每一個元素的margin box的左邊，與包含塊的左邊相接觸，即便存在浮動也是如此。

4.，BFC的區域不予float box重疊。

5， BFC就是頁面上一個獨立的容器，容器裏面的子元素不影響到外面的元素。

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

二，哪些元素會生成BFC？

1，根元素

2，float屬性不爲none

3，position爲absolute或fixed

4，display爲inline-block，table-cell,table-caption,flex,inline-flex

5,overflow不爲visible

三，BFC的做用和原理

1，自適應兩欄佈局

body { width: 300px; position: relative; }

.aside { width: 100px; height: 150px; float: left; background: #f66; }

.main { height: 200px; background: #fcc; }

根據BFC第三條，即便存在浮動，每一個元素margin box左邊，與包含塊左邊相接處。

因此就算存在浮動元素.aside,main的做弊愛你依然

與包含塊的左邊相接觸。

那麼怎麼作呢？根據BFC的區域不予float box重疊，經過出發main生成BFC來適應兩欄自適應佈局。

及.main{overflow:hidden;}

這個新的BFC不會與浮動的aside重疊，因此生成圖以下。

2，清除內部浮動

以前只是知道能夠overflow：hidden清除浮動，但具體原理不清楚。

.par { border: 5px solid #fcc; width: 300px; }

.child { border: 5px solid #f66; width:100px; height: 100px; float: left; }

根據第六條，咱們能夠觸發BFC，那麼par在計算高度時，par內部child也參與計算。

代碼：.par{ overflow:hidden;}

效果以下

3，防止垂直margin重疊

想防止垂直margin重疊的話，用兩個不一樣的容器去裝，並出發該容器變成BFC。

總結

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。由於 BFC內部的元素和外部的元素絕對不會互相影響，所以，當BFC外部存在浮動時，它不該該影響BFC內部Box 的佈局，BFC會經過變窄，而不與浮動有重疊。一樣的，當BFC內部有浮動時，爲了避免影響外部元素的佈局， BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。

1. 關於BFC
2. 關於BFC跟NFC
3. BFC相關知識
4. 關於BFC理解
5. BFC的相關知識
6. BFC和IFC分別是什麼？BFC有什麼作用？
7. 有關對hasLayout和BFC（Block Formatting Contexts）的理解
8. 理解BFC以及BFC相關佈局問題解決
9. BFC
10. bfc
更多相關文章...
• Rust 所有權 - RUST 教程
• 與傳輸層有關的基本知識 - TCP/IP教程
• NewSQL-TiDB相關
• 再有人問你分佈式事務，把這篇扔給他

相關標籤/搜索

每日一句

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