一、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...