資訊專欄INFORMATION COLUMN
摘要：屬性，會破壞文檔流，與非定位元素很難結合起來用，因此也不適合自適應布局。，其對無感，無法自適應剩余瀏覽器空間。總結的定義，就如同結界一樣，完全封閉對外無任何影響。引起的各種屬性與自適應布局自適應布局與屬性說明
BFC的定義
BFC的全稱是block formatting context（塊狀格式化上下文），當BFC起作用的時候，其元素內部無論怎么翻江倒海都不會影響到外部元素，同樣，外部元素的變化也不會影響到BFC內部元素，這就跟結界一樣，你可以理解為有一個很強的護盾在包裹著BFC元素，這也是為什么BFC元素不會發生margin重疊的原因。
引起BFC的條件BFC起作用不需要特別多的條件，滿足以下情況都會引起BFC：
html根元素
float不為none的元素
overflow為auto、hidden或scroll的元素
position不為relative或none的元素
display為inline-block的元素
table-cell、table-row或者table-caption元素
在清除浮動的時候，只要元素滿足以上這些情況，就不需要再加clear屬性。
BFC與自適應布局在之前的文章中，我們有說到過float實現的文字環繞效果，這時候如果給文字加上overflow:hidden就可以實現兩欄自適應布局。這樣實現的好處是文字的寬度是自適應的，無論圖片是多大或多小，排版都不會亂。代碼和效果如下：
.fl {
float: left;
width: 100px;
margin-right: 10px;
}
.content {
overflow: hidden;
}
這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示， 這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示，這里是文本展示
圖片和文字之間如果需要間距，可以在圖片中設置margin-right的值或者透明border，也可以在內容區設置透明border，但是不可以直接在內容區設置margin-left，如果是設置了margin-left，其間距必須是圖片的寬度加上你想設置的間距大小，這樣的間距就會對圖片的大小產生依賴。
與BFC有關的屬性說明由于引起BFC的屬性都有一些古怪的特性，并不是所有的情況都適合實現自適應布局，下面我們來一一說明下：
float屬性，設置了float之后，元素本身也會BFC化，由于具有破壞性和包裹性，也就失去了寬度自適應的特性，所以float并不適合自適應布局。
position屬性，position會破壞文檔流，與非定位元素很難結合起來用，因此也不適合自適應布局。
overflow:hidden，這個屬性要比float和position好很多，設置了overflow:hidden的元素，整體上跟普通元素差不多，也保留著普通元素的寬度自適應性，但是有一個缺點，就是內容溢出會被裁剪。在平時的開發中，這種場景不是很常見，因此overflow: hidden可以作為常用的BFC布局。
display:inline-block，由于inline-block會讓元素尺寸包裹，因此也不適用于BFC布局。
display:table-cell，table-cell會讓元素表現得跟單元格一樣，其有兩個特性，一個是父元素寬度足夠時，展示的是設置的寬度；第二個是，但元素寬度超出父元素時，展示的是父元素的寬度。因此，table-cell也可用于BFC布局，其原理就是設置一個足夠多的寬度值，例如3000px，這樣就可以充分利用瀏覽器的剩余空間，也不會產生滾動條，內容也是自適應的。
display:table-row，其對width無感，無法自適應剩余瀏覽器空間。
display:table-caption，沒有任何用處。
總結BFC的定義，BFC就如同結界一樣，完全封閉對外無任何影響。
引起BFC的各種屬性
BFC與自適應布局
自適應布局與BFC屬性說明
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117011.html
摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動產生，元素周圍的內容轉換為圍繞元素排列。 選擇器注意點 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...
摘要：包裹性所謂包裹性，其實是由包裹和自適應兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節中，如果子元素設置浮動屬性，則父元素就會出現高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實際工作中使用的非常多，如果使用不當就會出現意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優秀的前端開發人員，需要有刨根問底的精神，...
摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動，元素周圍的內容轉換為圍繞元素排列。從浮動的起因和浮動的實現后果來看，浮動不適合用于大范圍的布局，更適合利用其特性實現一些小范圍的流體布局效果。 張鑫旭的CSS深入理解之float浮動學習筆記 float的歷史 float為產生文字環繞效果而生 float的特性 — 包裹和破壞 包裹：即產生一個BFC破壞：使父容器...
摘要：張鑫旭的深入理解之學習筆記基本屬性屬性介紹默認當與值相同時，等同于當與值不相同時，其中一個值被賦予時，若另一個值為，那這個會被重置為作用前提元素非對應方位的尺寸限制拉伸對于單元格等需要為狀態才可以與滾動條頁面默認滾動條來自與無 《張鑫旭的CSS深入理解之overflow》學習筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認)|hidd...
閱讀 2892·2021-11-23 09:51
閱讀 3403·2021-11-22 09:34
閱讀 3304·2021-10-27 14:14
閱讀 1503·2019-08-30 15:55
閱讀 3345·2019-08-30 15:54
閱讀 1066·2019-08-30 15:52
閱讀 1887·2019-08-30 12:46
閱讀 2844·2019-08-29 16:11
