BFC

spacewander 發(fā)布于2019-08-29 17:14 / 1443人閱讀

摘要：垂直方向的距離由決定。屬于同一個(gè)的兩個(gè)相鄰的會(huì)發(fā)生重疊每個(gè)元素的的左邊，與包含塊的左邊相接觸對(duì)于從左往右的格式化，否則相反。的區(qū)域不會(huì)與重疊。計(jì)算的高度時(shí)，浮動(dòng)元素也參與計(jì)算。剩下的一點(diǎn)間隙是的。當(dāng)給形成一個(gè)，的高度就被撐開(kāi)了。

前端精選文摘：BFC 神奇背后的原理
小科普：到底什么是 BFC、IFC、GFC 和 FFC

一：BFC (Block Formatting Context)定義

BFC 全稱 Block Formatting Context，翻譯塊級(jí)格式化上下文。BFC 可以看作是隔離了的獨(dú)立容器（渲染區(qū)域），容器里面的元素不會(huì)在布局上影響到外面的元素，相當(dāng)于建立一個(gè)隱形的邊界

前提：每個(gè)渲染區(qū)域用formatting context表示，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。在正常流中的盒子要么屬于塊級(jí)格式化上下文，要么屬于內(nèi)聯(lián)格式化上下文。

二、BFC 的產(chǎn)生

根元素；

float屬性不為none；

position為absolute或fixed；

display為inline-block, flex, 或者inline-flex；

overflow不為visible（可視的）；

三、特性

BFC（塊級(jí)格式化上下文）對(duì)塊級(jí)元素在渲染的過(guò)程中遵循布局的規(guī)則：
1、內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。

2、Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。

3、BFC的區(qū)域不會(huì)與float box重疊。
4、BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
5、計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。　

四、應(yīng)用

1、margin 合并

下圖1 header和body之間出現(xiàn)較大間隙的原因是：h1里面有外邊距，和header的外邊距合并了

但給header構(gòu)建一個(gè)BFC之后，外邊距就不合并了。剩下的一點(diǎn)間隙是body的margin。

把body的margin取消之后，間隙就消失了

總結(jié)：（1）構(gòu)建BFC是阻止外邊距合并的方法之一(雖然加邊框和padding也可以實(shí)現(xiàn)外邊距合并)

（2）使用overflow：hidden，超出內(nèi)容會(huì)被隱藏，所以使用要慎重

2、contain float，包裹浮動(dòng)元素
先設(shè)置li為浮動(dòng)，可以發(fā)現(xiàn)nav的高度是沒(méi)有被撐開(kāi)的。

當(dāng)給nav形成一個(gè)bfc，nav的高度就被撐開(kāi)了。計(jì)算BFC高度的時(shí)候，是包括浮動(dòng)元素的

也可以通過(guò)浮動(dòng)，來(lái)形成BFC.但如果只是為了撐開(kāi)父元素，設(shè)置浮動(dòng)是很不明智的。

GPU云服務(wù)器云服務(wù)器 bfc bfc布局

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114193.html

相關(guān)文章

CSS BFC特性(塊級(jí)格式化上下文)

摘要：元素的特性全稱為，中文為塊級(jí)格式化上下文。應(yīng)用之利用特性解決塌陷問(wèn)題塌陷是一般指在標(biāo)準(zhǔn)文檔流中，兩個(gè)垂直排列的元素，一設(shè)置個(gè)，另一個(gè)設(shè)置，此時(shí)兩個(gè)元素的就會(huì)發(fā)生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級(jí)格式化上下文。它是頁(yè)面中的一塊獨(dú)立的渲染環(huán)境，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相...

岳光 2019-08-30 15:55 評(píng)論0 收藏0
CSS BFC特性(塊級(jí)格式化上下文)

摘要：元素的特性全稱為，中文為塊級(jí)格式化上下文。應(yīng)用之利用特性解決塌陷問(wèn)題塌陷是一般指在標(biāo)準(zhǔn)文檔流中，兩個(gè)垂直排列的元素，一設(shè)置個(gè)，另一個(gè)設(shè)置，此時(shí)兩個(gè)元素的就會(huì)發(fā)生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級(jí)格式化上下文。它是頁(yè)面中的一塊獨(dú)立的渲染環(huán)境，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相...

chanthuang 2019-08-02 14:09 評(píng)論0 收藏0
BFC 神奇背后的原理（轉(zhuǎn)）

摘要：最常見(jiàn)的有簡(jiǎn)稱和簡(jiǎn)稱。根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免重疊也是這樣的一個(gè)道理。 BFC 已經(jīng)是一個(gè)耳聽(tīng)熟聞的詞語(yǔ)了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動(dòng)，防止 margin 重疊等）。雖然我知道如何利用 BF...

April 2019-08-29 12:56 評(píng)論0 收藏0
BFC 神奇背后的原理（轉(zhuǎn)）

摘要：最常見(jiàn)的有簡(jiǎn)稱和簡(jiǎn)稱。根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免重疊也是這樣的一個(gè)道理。 BFC 已經(jīng)是一個(gè)耳聽(tīng)熟聞的詞語(yǔ)了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動(dòng)，防止 margin 重疊等）。雖然我知道如何利用 BF...

wawor4827 2019-08-01 17:07 評(píng)論0 收藏0
CSS中重要的BFC

摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡(jiǎn)介在解釋之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位流浮動(dòng)流普通流三種。使用包含浮動(dòng)元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡(jiǎn)介在解釋BFC之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位...

plus2047 2019-08-29 14:20 評(píng)論0 收藏0
# 是的，是你的BFC - CSS中常用

摘要：根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。因此會(huì)根據(jù)包含塊的寬度，和的寬度，自動(dòng)變窄。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免重疊也是這樣的一個(gè)道理。 CFC 全稱：(Block Formatting Contexts)含義是塊級(jí)格式化上下文)，就是一個(gè)塊級(jí)元素的渲染顯示規(guī)則一、簡(jiǎn)易理解.定義可以把 BF...

Cruise_Chan 2019-08-02 16:17 評(píng)論0 收藏0