国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS8:到底什么是BFC？

wyk1184 / 2521人閱讀

摘要：兩個兄弟盒之間的豎直距離由屬性決定。即使存在浮動盡管一個盒的行盒可能會因為浮動收縮，這也成立。它是塊級盒布局出現(xiàn)的區(qū)域，也是浮動層元素進行交互的區(qū)域。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。

現(xiàn)在有flex布局等新技術(shù)，bfc的效果比如包住元素，進行自適應(yīng)布局等已經(jīng)不需要了。現(xiàn)在只有免式的事后才需要知道BFC！

看不懂的定義 CSS規(guī)范中對 BFC 的描述

9.4.1 塊格式化上下文

浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和"overflow"不為"visible"的塊盒會為它們的內(nèi)容建立一個新的塊格式化上下文

在一個塊格式化上下文中，盒在豎直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由"margin"屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合并

在一個塊格式化上下文中，每個盒的left外邊（left outer edge）挨著包含塊的left邊（對于從右向左的格式化，right邊挨著）。即使存在浮動（盡管一個盒的行盒可能會因為浮動收縮），這也成立。除非該盒建立了一個新的塊格式化上下文（這種情況下，該盒自身可能會因為浮動變窄）

MDN 對 BFC 的描述

一個塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染出的一部分。它是塊級盒布局出現(xiàn)的區(qū)域，也是浮動層元素進行交互的區(qū)域。

一個塊格式化上下文由以下之一創(chuàng)建：

根元素或其它包含它的元素
浮動元素 (元素的 float 不是 none)
絕對定位元素 (元素具有 position 為 absolute 或 fixed)
內(nèi)聯(lián)塊 (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
具有overflow 且值不是 visible 的塊元素，
display: flow-root
column-span: all 應(yīng)當(dāng)總是會創(chuàng)建一個新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。
一個塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容，除了被包含于創(chuàng)建新的塊級格式化上下文的后代元素內(nèi)的元素。

塊格式化上下文對于定位 (參見 float) 與清除浮動 (參見 clear) 很重要。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。浮動不會影響其它塊格式化上下文中元素的布局，并且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。

張鑫旭對 BFC 的描述

http://www.zhangxinxu.com/wor...

BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。啪啦啪啦特性什么的，一言難盡，大家可以自行去查找，我這里不詳述，免得亂了主次，總之，記住這么一句話：BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素。所以，避免margin穿透啊，清除浮動什么的也好理解了。

看不懂定義！記不住定義！舉例回答B(yǎng)FC

不要試圖記憶他的定義。
應(yīng)該舉例回答：

功能1：爸爸管兒子

用 BFC 可以包住浮動元素。(這不是清除浮動，.clearfix 才是清除浮動）

例如如果兒子浮動了，那么爸爸包不住兒子，只有BFC才可以包住兒子。例如設(shè)置爸爸為float：left就包住了兒子。什么才算一個bfc？定義里bfc寫的

浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和"overflow"不為"visible"的塊盒會為它們的內(nèi)容建立一個新的塊格式化上下文

現(xiàn)在有點理解定義了

.baba{
  border: 10px solid red;
  min-height: 10px;
 display: flow-root; /* 只觸發(fā)BFC  */
  /* display: float;*/ /*觸發(fā)BFC */
  /* position: absolute; *//*觸發(fā)BFC */
/*  display: inline-block; 觸發(fā)BFC */
  /*  overflow:auto; 觸發(fā)BFC */
/*  display:table-cell;觸發(fā)BFC */
}
.erzi{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}
display: flow-root; /* 觸發(fā)BFC  */
  /* display: float;*/ /*觸發(fā)BFC */
  /* position: absolute; *//*觸發(fā)BFC */
  /*  display: inline-block; 觸發(fā)BFC */
  /*  overflow:auto; 觸發(fā)BFC */
  /*  display:table-cell;觸發(fā)BFC */

上面幾個屬性都會觸發(fā)BFC

存在一個問題：元素變成BFC之后，還會出發(fā)其他效果，比如position: absolute;會絕對定位。解決問題的方法就是使用display: flow-root;，它只有一個效果，讓當(dāng)前元素變成BFC。沒有副作用。
http://js.jirengu.com/winozoc...

還有一個作用，課可以歸功于爸爸管兒子，如果一個div不是bfc，他其中的子元素的margin-top和margin-bottom會伸到父div外面。
例子：


爸爸和兒子一樣高，沒有受到外邊距影響。

變成BFC之后：

外邊距也算了進去。

這個問題buyongbfc也可以解決，margin無法穿透border，只需要加一個border-top，margin就在.baba內(nèi)部了。
可見沒有任何情況完全需要BFC。

總結(jié)一下BFC功能1：一旦一個元素有上面那幾個屬性，那么他就是一個BFC，BFC會把內(nèi)部的元素包起來，不管內(nèi)部元素是否浮動。且內(nèi)部元素的邊距也不會突破這個父BFC的范圍。

功能2：兄弟之間劃清界限

既：讓兩個相鄰的BFC界限分明。
舉個例子：
兩個div是是兄弟關(guān)系，把哥哥浮動了，那么哥哥會疊在弟弟上面，會遮蓋弟弟。這時候如果把弟弟也變成BFC，那么哥哥和弟弟之間就會界限分明，誰都不會遮擋誰。
例子如下：

http://js.jirengu.com/woduniq...

總結(jié)BFC功能

內(nèi)部元素完全包起來（float等），外部元素界限分明，不重疊。

面試官問的時候就說：

首先一個BFC可以包住浮動元素，不讓他超過邊界（但這不是清除浮動，清除浮動用clearfix），即使是子元素的margin也可以包住，不沖出父元素。比如舉一個代碼的例子，兒子是浮動元素，那么只要在爸爸上寫overflow：hidden;或者overflow:auto;或者diaplay：flow-root;那么爸爸就會包住兒子，且margin也會在爸爸里面）

一個浮動元素會和另一個不是浮動的元素重疊，浮動元素會浮在兩一個元素上面，如果把另一個元素寫成bfc，那么這兩個元素就不會互相重疊。

記錄一下上下margin合并問題 
注釋：只有普通文檔流中  塊框 的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。值為大的邊距。

既：兩個塊級元素一般情況下上下邊距會合并，行內(nèi)元素，浮動元素，絕對定位之后不會合并。
http://js.jirengu.com/rihoxab...

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114129.html

相關(guān)文章

  • BFC到底是啥？

    摘要：兩個兄弟盒之間的豎直距離由屬性決定。即使存在浮動盡管一個盒的行盒可能會因為浮動收縮，這也成立。它是塊級盒布局出現(xiàn)的區(qū)域，也是浮動層元素進行交互的區(qū)域。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。 前言 在面試中，我們經(jīng)常會遇到一個常見的面試題，什么是BFC?于是我就去查閱了相關(guān)資料： css規(guī)范中是這樣描述BFC的 9.4.1 塊格式化上下文 浮動，絕對定位元素，...

    jeffrey_up 評論0 收藏0

  • CSS: 潛藏著的BFC

    摘要：而就潛藏在其中，當(dāng)你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到的神奇之處。實例解決侵占浮動元素的問題我們知道浮動元素會脫離文檔流，然后浮蓋在文檔流元素上。 在寫樣式時，往往是添加了一個樣式，又或者是修改了某個屬性，就達到了我們的預(yù)期。而BFC就潛藏在其中，當(dāng)你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到BFC的神奇之處。 一、什么是BFC（Block Form...

    learn_shifeng 評論0 收藏0

  • 重新定義BFC

    摘要：大家花秒的時間組織組織語言，給下個定義，看看咱們的想法是不是一致的，哈哈。 先給BFC下個定義 CSS里的BFC可真的是一個老生長談的問題，網(wǎng)上的資料很多，介紹的也很詳細，但是看完之后，還是不知道BFC到底是個啥東西，似懂非懂，它到底是個標(biāo)準(zhǔn)呢，還是一套約定俗成的編碼規(guī)范呢，A和B兩個DIV，BFC化到底指的是A還是指的是B呢。大家花5秒的時間組織組織語言，給BFC下個定義，看看咱們的...

    harryhappy 評論0 收藏0

  • CSS：BFC 最熟悉的陌生人

    摘要：就是神奇之一，它也是最熟悉的陌生人，因為你一不小心就會觸發(fā)它然而你并沒有意識到它正在神奇地發(fā)揮作用。最常見的有和，中還增加了和，這里就不深入研究了。其根本原理就是它們處于同一個，符合屬于同一個的兩個相鄰元素的會發(fā)生重疊的規(guī)則。 BFC，你也許聽過這個詞，但是你可能不是很有底氣地解釋清楚。寫樣式的時候，往往加了一個樣式或者改了一個屬性，就能達到你期望的效果，一切都是如此地神奇。BFC就是...

    focusj 評論0 收藏0

  • CSS魔法堂：你一定誤解過的Normal flow

    摘要：后來終于知道是某位大神將翻譯為文檔流而已。。。。。。另外單純設(shè)置效果與采用是一樣的魔法堂就這個樣，而浮動定位也是基于。相對定位的最強武器就是個屬性了，好明顯它們默認(rèn)值均是。 前言 ?剛接觸CSS時經(jīng)常聽到看到一個詞文檔流，那到底什么是文檔流呢？然后會看到絕對定位和浮動定位能脫離文檔流，從這句可以看到文檔流和絕對定位、浮動定位是同一個范疇的概念，再后來在W3C標(biāo)準(zhǔn)文檔找到關(guān)于Absolu...

    Hancock_Xu 評論0 收藏0

發(fā)表評論

0條評論

wyk1184

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<