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