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