先說一下什么是BFC(Block Formatting Contexts)
BFC：塊級格式化背景關系（獨立的渲染區），通俗的說是塊級元素布局邏輯或規則，想要觸發BFC就要是塊級元素，要不把它轉為塊級元素（display:block;）
BFC的觸發條件，
1.在html框架中就能觸發bfc，也就是一開始我們寫塊狀元素的時候它會垂直放置，而不會水平放置，因為這是bfc的布局規則（每個元素獨占一行），
2.當float的屬性值不為none時，也就是左右浮動時，就能觸發BFC，
3.position是absolute(絕對定位)或fixed（固定定位），
4.display為inline-block,table-cell,table-caption,flex,inline-flex
5.overflow不為visible，
BFC的布局規則，（滿足觸發條件）
1.在兩個塊級元素中，給它們添加一下一上margin時你會發現它們的距離不會累加，只會顯示最大的margin，這就是BFC的布局規則，只要在一個塊級元素中套入另一個BFC就可以解決，
在一個div中套入另一個div不要讓它們同級，
分別設定兩個上下margin的值為30px，給第二個的父元素添加overflow:hidden;讓它形成BFC，運行就可以顯示累加邊距，
代碼，設定上div邊距margin-bottom:30px;下div邊距margin-top:30px;
overflow:hidden;為觸發BFC條件，
運行結果如下，兩個div邊距就為60px
2.BFC內部的box為在垂直方向，一個接一個放置，（見上觸發條件1）
3.每個元素的margin box的左邊，與包含塊border box的作用相接觸，
4.BFC的區域不會與float box重疊，
當左邊box為浮動時，右邊是BFC區域，二者不會重疊，
運行結果：
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素
6.當計算BFC的高度時，浮動元素也參與計算，
比如父元素不設高度時，子元素是浮動元素，這樣父元素的高度就會塌陷，影響頁面布局，讓父元素觸發BFC就可以解決（如overflow:hidden），因為BFC會計算浮動元素的高度
BFC布局與普通文本布局的區別
1.BFC不會和浮動的元素重疊，普通文本會重疊，
2.BFC會計算浮動元素的高度，使父元素不會塌陷，普通文本不會計算，父元素高度會塌陷，
3.BFC會計算上下塊元素margin的邊距，普通文本只會顯示上下塊元素最大的margin，
4.BFC中的margin不會傳遞給父級，普通文本的margin會傳遞給父級，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/14768.html
標籤：HTML5