個人筆記-BFC的知識點梳理

時間 2020-10-06

標籤 html 佈局學習 flex url code orm htm get 欄目 HTML 简体版

原文原文鏈接

什麼是BFC？

BFC（Block Formatting Contexts）塊級格式化上下文，它是頁面 CSS 視覺渲染的一部分， 用於決定塊級盒的佈局及浮動相互影響範圍的一個區域 。html

BFC的建立

根元素（ <html> ）
浮動元素（ float 不爲 none ）
絕對定位元素（ position 爲 absolute 或 fixed ）
表格的標題和單元格（ display 爲 table-caption ， table-cell ）
匿名錶格單元格元素（ display 爲 table 或 inline-table ）
行內塊元素（ display 爲 inline-block ）
overflow 的值不爲 visible 的元素
彈性元素（ display 爲 flex 或 inline-flex 的元素的直接子元素）
網格元素（ display 爲 grid 或 inline-grid 的元素的直接子元素）

BFC的範圍

BFC 包含建立它的元素的全部子元素，可是不包括建立了新的 BFC 的子元素的內部元素。
簡單來講，子元素若是又建立了一個新的 BFC ，那麼它裏面的內容就不屬於上一個 BFC 了，這體現了 BFC 隔離的思想。也就是所說， 一個元素不能同時存在於兩個 BFC 中 。佈局

BFC的特性

BFC 內部的塊級盒會在垂直方向上一個接一個排列 ①
同一個 BFC 下的相鄰塊級元素可能發生外邊距摺疊，建立新的 BFC 能夠避免的外邊距摺疊 ②
每一個元素的外邊距盒（margin box）的左邊與包含塊邊框盒（border box）的左邊相接觸（從右向左的格式化，則相反），即便存在浮動也是如此 ③
浮動盒的區域不會和 BFC 重疊 ④
計算 BFC 的高度時，浮動元素也會參與計算 ⑤

BFC的應用

自適應多欄佈局

利用 特性③ 和 特性④ ，中間欄建立 BFC ，左右欄寬度固定後浮動。因爲盒子的 margin box 的左邊和包含塊 border box 的左邊相接觸，同時浮動盒的區域不會和 BFC 重疊，因此中間欄的寬度會自適應，示例。學習

防止外邊距摺疊

利用 特性② ，建立新的 BFC ，讓相鄰的塊級盒位於不一樣 BFC 下能夠防止外邊距摺疊，示例。flex

清除浮動

利用 特性⑤ ， BFC 內部的浮動元素也會參與高度計算，能夠清除 BFC 內部的浮動，示例。url

筆記最後

參考文章：url（https://www.colabug.com/2020/...）

這是我在思否上寫的第一篇筆記，之後會持續寫的，固然後面也會加上我學習中的所思所想。結尾引入一句很喜歡的話：保持獨立思考，不卑不亢，長成本身要的樣子。code

相關文章

相關標籤/搜索

PHP 面試知識梳理

每日一句

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

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<