1. 程式人生 > >BFC作用以及原理

BFC作用以及原理

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不為visible

BFC的作用及原理
1. 清除內部浮動
2.防止垂直 margin 重疊
垂直方向的相鄰的外邊距會發生外邊距的重疊現象
兄弟元素的相鄰外邊距會取最大值
父子元素的相鄰外邊距會傳遞給父元素