一、什麼是BFC？佈局
BFC 全稱爲 「塊 格式化 上下文」 (Block Formatting Context) 字體
一、如何生成BFC？spa
(1) float:left或rightcode
(2) 根元素Htmlorm
(3) overflow:hidden,auto,scollblog
(4) display:inline-block;it
(5) position:fixed,absoluteio
二、BFC規則class
(1) 垂直方向上的距離由margin決定，屬於同一個BFC的兩個相鄰的標籤的margin會發生重疊容器
<style> .box{ width: 300px; height: 300px; float: left; border: 5px solid red; } .top{ width: 100px; height: 100px; margin-bottom:10px ; border:5px solid gray; } .bottom{ width: 100px; height: 100px; margin-top:40px ; border:5px solid blue; } </style> <body> <div class="box"> <div class="top"></div> <div class="bottom"></div> </div> </body>
top盒子與bottom盒子垂直間距40px(並無把margin-top margin-bottom疊加起來 而是取了較大的一個值，由於他們發生了重疊)
(2) 每一個標籤的左外邊距與包含塊的左外邊界相接觸（從左向右），即便浮動標籤也是如此。
這個理解就比較簡單了，任何一個標籤在你沒有設置margin，padding，position,等改變其位置的屬性是，他默認放在最左邊，後面的一個接一個
(3) BFC的區域不會與浮動的標籤區域重疊
a左浮動了b也左浮動了，a與b不會重疊，只會一個接一個的放置
(4) 計算BFC高度的時候，浮動子元素也參與計算
說一個很簡單的例子，咱們知道清除浮動的方法有不少，其中一種就是給父元素也設置浮動，父元素就有高度了，其緣由就在這（BFC高度的時候，浮動子元素也參與計算）也就是父元素是一個BFC，在算父元素的高度時，浮動的子元素也參與計算，從而父元素就會被子元素撐開
(5) BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響外面的標籤，反之亦然
三、BFC能解決什麼問題？（與上面的規則對應）
(1) 外邊距重疊
(2) 自適應兩欄或三欄佈局
(3) 防止字體環繞
(4) 清除浮動