資訊專欄INFORMATION COLUMN
摘要：一概念即塊級格式化上下文，它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。通俗一點(diǎn)來講，可以把理解為一個封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會影響到外部。
一、BFC概念
BFC 即 Block Formatting Contexts (塊級格式化上下文)，它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。
具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性。
通俗一點(diǎn)來講，可以把 BFC 理解為一個封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會影響到外部。
二、觸發(fā)只要元素滿足下面任一條件即可觸發(fā) BFC 特性：
body 根元素
浮動元素：float 除 none 以外的值
絕對定位元素：position (absolute、fixed)
display 為 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
三、BFC的特性及應(yīng)用 1.同一個BFC下外邊距會發(fā)生重疊 代碼如下
BFC
運(yùn)行結(jié)果如下圖：
從效果上看，因為兩個 div 元素都處于同一個 BFC 容器下 (這里指 body 元素) 所以第一個 div 的下邊距和第二個 div 的上邊距發(fā)生了重疊，所以兩個盒子之間距離只有 50px，而不是 100px
使用BFC原理修改后的代碼如下：
BFC
這個時候，兩個盒子之間的邊距就是100px，運(yùn)行結(jié)果如下圖：
2.BFC 可以包含浮動的元素（清除浮動）
我們都知道，浮動的元素會脫離文檔流，看例子：
BFC
運(yùn)行結(jié)果如下圖：
由于浮動元素脫離文檔流，所以容器只剩下了2px的高度，如果觸發(fā)BFC，那么容器就會包裹浮動元素
BFC清除浮動的影響
運(yùn)行結(jié)果如下圖
3.BFC 可以阻止元素被浮動元素覆蓋
BFC
我是一個沒有浮動，沒有觸發(fā)BFC的元素.width:200px;
height:300px;
background:#f0f;
運(yùn)行結(jié)果如下圖：
這個時候，第一個浮動的元素已經(jīng)覆蓋了第二個元素，但是文本內(nèi)容不會被覆蓋，如果第二個元素觸發(fā)BFC，即第二個元素添加overflow:hidden;就會變成
持續(xù)更新，歡迎大家指教！文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116929.html
摘要：一概念即塊級格式化上下文，它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。通俗一點(diǎn)來講，可以把理解為一個封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會影響到外部。 一、BFC概念 BFC 即 Block Formatting Contexts (塊級格式化上下文)，它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子...
摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時間 閱讀10分鐘 什么是盒模型 每一個文檔中，每...
摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時間 閱讀10分鐘 什么是盒模型 每一個文檔中，每...
首先回顧一下普通流，普通流對后面進(jìn)一步了解BFC有很大的作用 普通流（Normal Flow） 普通流是網(wǎng)頁中元素的默認(rèn)排版，默認(rèn)情況下 塊級元素：以block flow direction排列（每一個塊級元素新起一行，即以從上往下以列排列） 行內(nèi)元素：不會另起一行，一個接一個排布，直到空間不足 脫離普通流 CSS有以下幾種方法使元素脫離普通流 float float能夠使元素向某一方向偏移，...
閱讀 1582·2021-09-02 15:41
閱讀 993·2021-09-02 15:11
閱讀 1274·2021-07-28 00:15
閱讀 2296·2019-08-30 15:55
閱讀 1137·2019-08-30 15:54
閱讀 1686·2019-08-30 15:54
閱讀 2967·2019-08-30 14:02
閱讀 2517·2019-08-29 16:57
