資訊專欄INFORMATION COLUMN
摘要：比如說最常見的塊級元素內(nèi)聯(lián)元素文檔模型層疊樣式模型盒子模型等，但還有一種規(guī)范經(jīng)常會被排除在規(guī)范的認(rèn)知之外。屬于同一個的兩個相鄰的會發(fā)生重疊。計算的高度時，浮動元素也參與計算。垂直方向的距離由決定，利用這一點(diǎn)可以解決塌陷問題。
對于很多初學(xué)者來說，CSS是不講“道理”的，但是如果去深究，會發(fā)現(xiàn)其實CSS是有一定道理的。
比如說最常見的塊級元素、內(nèi)聯(lián)元素、文檔模型、層疊樣式模型、盒子模型CSS等，但還有一種FC規(guī)范經(jīng)常會被排除在CSS規(guī)范的認(rèn)知之外。
FC當(dāng)然不是“Fuck”的意思，英文名是“Formatting Context”,也就是格式化上下文，他是頁面中的一塊渲染區(qū)域，在這個區(qū)域內(nèi)，有一套獨(dú)立的渲染規(guī)則，它決定了其子元素將如何布局，以及和其他元素的關(guān)系和相互作用，并且父級元素對它不能產(chǎn)生影響。
“FC”可以簡單的理解為瀏覽器對于某個元素樣式的一種處理方法，不能被開發(fā)者顯式的修改，符合FC規(guī)則的會計元素元素的屬性對于內(nèi)部與外部元素會表現(xiàn)出一定的特性”。
FC分為BFC、IFC、FFC、GFC四種類型。其中FFC、GFC是CSS3中才有的類型，后面將一一進(jìn)行講解。
BFCBFC全稱“Block Formatting Contexts”翻譯過來就是“塊級格式化上下文”。
符合以下任一條件即會生成一個“BFC”根元素，HTML
float屬性不為none
overflow屬性不為visible
display屬性為inline-block、table-cell、table-caption
position屬性為absolute或者fixed
還有其他條件也會觸發(fā)BFC，這里只列了幾種比較常見的情況，有興趣的可以看一下MDN說明：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
BFC布局規(guī)則內(nèi)部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸，即使存在浮動也是如此。
BFC的區(qū)域不會與設(shè)置了float屬性值的兄弟元素重疊。
BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算。
下面通過幾個例子，只需要幾分鐘可以明白BFC能幫我們做什么。
通過BFC清除浮動.f-l { float: left; }
.warp { border: 1px solid red; display: inline-block; }
.div-1 { width: 100px; height: 100px; background: green; }
.div-2 { width: 200px; height: 200px; background: yellow; }
最外層元素將“display”屬性設(shè)置成了“inline-block”，隱性的形成了BFC。
BFC中的元素計算高度時浮動元素也是會參與計算的，達(dá)到了清除浮動的效果。
.warp { background: black; display: inline-block; width: 200px; height: 200px; }
.div-1 { margin-top: 20px; width: 100px; height: 100px; background: green; }
如果不符合BFC規(guī)范，會產(chǎn)生下面的效果，也就是“margin塌陷”。
所謂“margin塌陷”就是指CSS規(guī)則中，父元素與子元素頂部起始點(diǎn)在未加margin前是同一坐標(biāo)的情況下，子元素的margin會影響父元素。
Box垂直方向的距離由margin決定，利用這一點(diǎn)可以解決margin塌陷問題。
.warp { border: 1px solid red; }
.left { float: left; width: 150px; height: 200px; background: green; }
.right { overflow: hidden; height: 200px; background: yellow; }
BFC的區(qū)域不會與設(shè)置了float屬性值的兄弟元素重疊。
利用這一點(diǎn)可以輕松的實現(xiàn)經(jīng)典左右布局。
利用BFC還可以做很多其他的事情，例如：元素間上下margin間距問題、浮動元素高度計算問題
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114336.html
摘要：屬性，會破壞文檔流，與非定位元素很難結(jié)合起來用，因此也不適合自適應(yīng)布局。，其對無感，無法自適應(yīng)剩余瀏覽器空間?？偨Y(jié)的定義，就如同結(jié)界一樣，完全封閉對外無任何影響。引起的各種屬性與自適應(yīng)布局自適應(yīng)布局與屬性說明 BFC的定義 BFC的全稱是block formatting context（塊狀格式化上下文），當(dāng)BFC起作用的時候，其元素內(nèi)部無論怎么翻江倒海都不會影響到外部元素，同樣，外部...
摘要：官方說法就是它規(guī)定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時又是的包含塊，不是絕對的。因此稱為匿名盒子。行內(nèi)盒子行內(nèi)級元素會生成行內(nèi)級盒子，該盒子同時會參與行內(nèi)格式化上下文的創(chuàng)建。如果只有一個值指定為，則其使用的值來自相等。 作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...
摘要：必須表現(xiàn)為一塊一塊的，才能給出一個隔離的空間。觸發(fā)的具體條件光有的潛質(zhì)，不代表就直接會觸發(fā)。最后，一般設(shè)置最常用的就是給盒子加上因為這樣的寫法基本上不會對原有的其他樣式產(chǎn)生影響。BFC 即為Block formatting context 的縮寫，BFC 主要用來將一個盒子設(shè)置為一個隔離的容器，不管盒子內(nèi)部的元素具有什么屬性，都不會影響到盒子的外面。 1、哪些元素能產(chǎn)生BFC 不是所有的元素...
摘要：通過格式化上下文后可以將脫離了普通流的元素隔離，使其不會與外界的元素相互隔離。第一次寫，寫得不好請大家多多指教哈哈哈哈 首先回顧下CSS常出現(xiàn)的幾個樣式問題1當(dāng)子元素添加上邊距時，父元素也會向下移動 showImg(https://segmentfault.com/img/bV6tGz?w=361&h=366); 解決方法:給子元素添加display:inline-block;或者用父...
摘要：包裹性所謂包裹性，其實是由包裹和自適應(yīng)兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節(jié)中，如果子元素設(shè)置浮動屬性，則父元素就會出現(xiàn)高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實際工作中使用的非常多，如果使用不當(dāng)就會出現(xiàn)意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優(yōu)秀的前端開發(fā)人員，需要有刨根問底的精神，...
閱讀 910·2021-09-03 10:42
閱讀 1520·2019-08-30 15:56
閱讀 1457·2019-08-29 17:27
閱讀 881·2019-08-29 15:25
閱讀 3168·2019-08-26 18:27
閱讀 2489·2019-08-26 13:41
閱讀 1897·2019-08-26 10:39
閱讀 1589·2019-08-23 18:36
