1.定義
bfc:塊級格式化上下文;網上的解釋聽的雲裏霧裏;看到前端大神winter的一番話讓我終於對這個鬼東西有一些瞭解;css
我相信大多數的前端開發者都對bfc不陌生,我周圍的開發者大多都會使用bfc,但都說不清楚bfc究竟是什麼東西;前端
在 CSS 標準中,規定了如何排布每個文字或者盒的算法,這個算法依賴排版的當前狀態;css把這個狀態叫作格式化上下文;
能夠理解在正常文檔流中,排布盒子的算法由如下公式完成:
盒子的位置:格式化上下文+盒模型+定位;
複製代碼
咱們正常的文檔流都是在塊級格式化上下文中排布的;塊級元素自上向下排布,行內元素從左到右排布;可是咱們會在大盒子(塊級格式化上下文中)中不經意的建立新的小格式化上下文;算法
2.創造條件佈局
1.浮動;
2.絕對定位元素;
3.非塊級可是能夠包含塊級元素的包含塊; 4.overflow不爲visible的元素;(由於超出的文本與外部的格式化上下文進行了融合;spa
3.咱們能利用它來作什麼: 1.避免外邊距重疊; 2.清除浮動;(遇到bfc就不要加clearfix了。。。) 3.解決多列布局的問題;code