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