CSS中的層疊上下文和BFC是兩個很虛但極其重要的概念,影響到網頁佈局的方方面面。有幾篇博文講得很詳細,這裏稍加摘錄,便於記憶。
CSS層疊上下文
張鑫旭在深入理解CSS中的層疊上下文和層疊順序裏有深入的講解:
可以創建層疊上下文的規則:
z-index
值不爲auto
的flex項(父元素display:flex|inline-flex
)- 元素的
opacity
值不是1
- 元素的
transform
值不是none
- 元素
mix-blend-mode
值不是normal
- 元素的
filter
值不是none
- 元素的
isolation
值是isolate
will-change
指定的屬性值爲上面任意一個- 元素的
-webkit-overflow-scrolling
設爲touch
需要注意的是:
- 如果層疊上下文元素不依賴z-index數值,則其層疊順序是
z-index:auto
,可看成z:index:0
級別; - 如果層疊上下文元素依賴z-index數值,則其層疊順序由
z-index
值決定。
BFC(Block Formatting Context)
夢想天空在BFC 神奇背後的原理裏解析得很到位:
BFC直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域,只有Block-level box參與, 它規定了內部的Block-level Box如何佈局,並且與這個區域外部毫不相干。
BFC佈局規則:
- 內部的Box會在垂直方向,一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
- 每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時,浮動元素也參與計算
哪些元素會生成BFC?
- 根元素
float
屬性不爲none
position
爲absolute
或fixed
display
爲inline-block
,table-cell
,table-caption
,flex
,inline-flex
其中的一項overflow
爲auto
,scroll
或hidden
張鑫旭在博文CSS深入理解流體特性和BFC特性下多欄自適應佈局裏面生動的講解了流媒體佈局、自適應佈局,推薦進一步閱讀。
清除浮動
推薦Micro Clearfix by Nicolas Gallagher
.container::before, .container::after {
content:"";
display:table;
}
.container::after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
注意,這裏display屬性block
和table
均有使用,區別是table
會阻止(子元素與兄弟元素的)margins重疊,也就是創建了BFC,因此不可輕易互換。
例如對於此HTML結構:
<div class="box clearfix"></div>
<div class="clearfix">
<div class="box"></div>
</div>
如果爲block
,兩個box之間的間距是100px
;如果爲table
,則是200px
。
但如果這麼寫,兩種情況下都是100px
:
<div class="box clearfix"></div>
<div class="box clearfix"></div>
更多內容參考這裏的討論:http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use