資訊專欄INFORMATION COLUMN
摘要：兩個兄弟盒之間的豎直由屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直會合并。在一個塊格式化上下文中，每個盒的外邊挨著包含塊的邊。即使存在浮動，這也成立。功能一用包住浮動元素。功能二兄弟之間劃清界限。
一：什么是BFC?
在W3C規范中，浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如：inline-block, table-ceils和table-captions）,以及overflow值不為“visiable”的塊級元素，都會為他們的內容創建新的BFC，就是block formatting context的縮寫(塊級格式上下文)。
在一個塊級格式上下文中，盒模型在豎直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直由‘margin’屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合并。
在一個塊格式化上下文中，每個盒的left外邊挨著包含塊的left邊。即使存在浮動，這也成立。除非該盒建立了一個新的塊格式化上下文（這種情況下，該盒自身可能會因為浮動變窄）
總而言之：BFC內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素。
二. BFC的功能。功能一：用BFC包住浮動元素。
功能二：兄弟之間劃清界限。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115769.html
摘要：在一個中，兩個相鄰的塊級盒子的垂直會產生合并。對于從右到左的格式來說，則觸碰到右邊緣。正常人類的理解上面個什么瘠薄，看不懂。 BFC是什么? W3C這么說 在W3C規范中的BFC是這樣定義的： 浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如，inline-block、table-cells和table-captions），以及overflow值不為visiable的塊級盒子，都會為...
摘要：而不會因為高度塌陷而被隱藏在內部浮動的子元素下。若果不考慮的高度塌陷問題，直接在其弟元素處設置屬性即可。開始我誤認為了是將中的內容插入至被選元素的弟元素位置上。中的示例從這個示例可以看出，偽類內容的默認方式應該為內聯。 1. 引子 前段時間學習 web 布局的時候，因為要用浮動 float 屬性，所以就順理成章地碰到了清除浮動 clear 屬性。教學的案例中是用新建一個空的 div ...
摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框寬度及上內邊距距離為時，此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象。 盒模型 在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊 與 內容邊。 在標準模式下，一個塊的總寬度=...
摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框寬度及上內邊距距離為時，此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象。 盒模型 在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊 與 內容邊。 在標準模式下，一個塊的總寬度=...
摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...
閱讀 3084·2021-09-22 15:20
閱讀 2607·2019-08-30 15:54
閱讀 1971·2019-08-30 14:06
閱讀 3120·2019-08-30 13:05
閱讀 2462·2019-08-29 18:36
閱讀 574·2019-08-29 15:10
閱讀 528·2019-08-29 11:17
閱讀 825·2019-08-28 18:11
