【轉】BFC-塊級格式化上下文

wuaiqiu 發(fā)布于2019-08-29 12:24 / 2016人閱讀

摘要：一布局規(guī)則內(nèi)部的會在垂直方向排列。屬于同一個的兩個相鄰的會發(fā)生重疊。每個元素的的左邊，與包含塊的左邊相接觸。計算的高度時，浮動元素也參與計算。因此會根據(jù)包含塊的寬度，和的寬度，自動變窄。

BFC它是一個獨立的渲染區(qū)域，它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。

一、BFC布局規(guī)則：

1、內(nèi)部的Box會在垂直方向排列。
2、Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
3、每個元素的margin box的左邊，與包含塊border box的左邊相接觸。
4、BFC的區(qū)域不會與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的作用及原理

自適應兩欄布局

BFC

當觸發(fā)main生成BFC后（去掉代碼中注釋即可），這個新的BFC不會與浮動的aside重疊。因此會根據(jù)包含塊的寬度，和aside的寬度，自動變窄。效果如下

清除內(nèi)部浮動

BFC

為達到清除內(nèi)部浮動，我們可以觸發(fā)par生成BFC（去掉代碼中注釋即可），那么par在計算高度時，par內(nèi)部的浮動元素child也會參與計算。效果如下

防止垂直 margin 重疊

BFC

Haha

Hehe

我們可以在p外面包裹一層容器，并觸發(fā)該容器生成一個BFC（去掉代碼中注釋即可）。那么兩個P便不屬于同一個BFC，就不會發(fā)生margin重疊了。效果如下

云服務器 GPU云服務器電腦上下載的視頻怎么轉換格式 bfc 快轉視頻格式 bfc布局

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111873.html

BFC 神奇背后的原理（轉）

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

April 2019-08-29 12:56 評論0 收藏0
BFC 神奇背后的原理（轉）

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

wawor4827 2019-08-01 17:07 評論0 收藏0
20170601-BFC(塊級格式化上下文)

摘要：的全稱是塊級格式化上下文。浮動絕對定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級元素會在其內(nèi)部建立新的塊級格式化上下文。使用可以解決以下問題父子元素的上下合并問題文字圍繞浮動元素的問題和子元素浮動導致父元素高度為的問題。 BFC BFC的全稱是Block Format Content -- 塊級格式化上下文。浮動、絕對定位的元素(absolute、fixed定位)、塊容器(...

PAMPANG 2019-08-29 12:41 評論0 收藏0
20170601-BFC(塊級格式化上下文)

摘要：的全稱是塊級格式化上下文。浮動絕對定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級元素會在其內(nèi)部建立新的塊級格式化上下文。使用可以解決以下問題父子元素的上下合并問題文字圍繞浮動元素的問題和子元素浮動導致父元素高度為的問題。 BFC BFC的全稱是Block Format Content -- 塊級格式化上下文。浮動、絕對定位的元素(absolute、fixed定位)、塊容器(...

weknow619 2019-08-01 16:56 評論0 收藏0
塊級格式化上下文(BFC)

摘要：可以阻止元素被浮動元素覆蓋浮動元素的塊級兄弟元素會無視浮動元素的位置，盡量占滿一整行，這樣就會被浮動元素覆蓋，為該兄弟元素觸發(fā)后可以阻止這種情況的發(fā)生。一、什么是BFC 具有BFC屬性的元素也屬于普通流定位方式，與普通容器沒有什么區(qū)別，但是在功能上，具有BFC的元素可以看做是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且具有普通容器沒有的一些特性，比如包含浮動元素...

TerryCai 2019-08-29 15:22 評論0 收藏0