一、css中的bfc
bfc : 直譯為「塊級格式化上下文」。他是乙個獨立的渲染區域,只有block-level box參與,它規定了內部的block-level box如何布局,並且與這個區域外部毫不相干。
bfc布局規則:
1.內部的box會在垂直方向,乙個接乙個地放置。
2.bfc的區域不會與float box重疊
3.內部的box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊,取這兩個box的margin中的較大值。
4.計算bfc的高度時,浮動元素也參與計算。(清除浮動 haslayout)
5.bfc就是頁面上的乙個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素。反之也如此。
bfc什麼時候出現(哪些元素會生成bfc):
根元素float屬性不為none
position為absolute或者fixed
overflow不為visible
display為inline-block,table-cell,table-caption,flex,inline-flex
二、margni塌陷
在文件流中,父元素的高度預設是被子元素撐開的
也就是說 子元素有多高,父元素就有多高
但是當子元素設定浮動之後,子元素會完全脫離文件流
此時將會導致子元素無法撐開父元素的高度,導致父元素高度塌陷
CSS中的BFC解析
bfc 即塊級格式上下文 block formatting context 它是指乙個獨立的塊級渲染區域,只有block level的box參與,該區域擁有一套渲染規則來約束塊級盒子的布局,且與區域外部無關。css2.1規定滿足一下條件之一就會生成bfc 根元素float的值不為none overf...
CSS中的BFC詳解
一 何為bfc bfc block formatting context 格式化上下文,是web頁面中盒模型布局的css渲染模式,指乙個獨立的渲染區域或者說是乙個隔離的獨立容器。二 形成bfc的條件 1 浮動元素 float除none以外的值。2 定位元素 position absoluted,fi...
CSS中的BFC詳解
引言 一 何為bfc bfc block formatting context 格式化上下文,是web頁面中盒模型布局的css渲染模式,指乙個獨立的渲染區域或者說是乙個隔離的獨立容器。二 形成bfc的條件 1 浮動元素,float 除 none 以外的值 2 定位元素,position absolu...