今天部門請前端工程師給后端工程師們做了一場主題為《帶你了解H5——基礎篇》。嗯，的確很基礎，絕大多數(shù)都是我知道的，但是聽到了一個完全不熟悉的詞：BFC，聽完培訓有幾個模糊的印象：
- 給元素設置了<code>overflow:hidden</code>，貌似就是BFC了
- BFC可以解決margin重疊的問題
- BFC可以解決浮動元素撐不開父級元素的問題
- BFC可以解決側(cè)邊欄問題
正好今天的任務除了需求外，沒數(shù)據(jù)、沒接口、沒文檔，實在無法展開工作，我就在網(wǎng)上搜了一些文章學習了一下。雖然別人已經(jīng)寫得很好了，但那是別人的，我還是想自己稍微整理一下，寫篇記錄，以加深自己對BFC的理解。
什么是BFC
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的塊級格式化上下文(block formatting context)。
所以，BFC不是CSS樣式，而是元素渲染的一種類型，共有四種類型：BFC、IFC、FFC、GFC，詳見瀏覽器上下文渲染之 BFC、IFC、FFC、GFC
成為BFC的條件
- float的值不為none
- overflow 除了visible 以外的值（hidden，auto，scroll ）
- position值為（absolute，fixed）不為static或者relative
- display的值為 table-cell, table-caption, inline-block,flex, 或者 inline-flex中的其中一個
- fieldset元素
BFC的特性
1.BFC內(nèi)部，盒子由上至下按順序進行排列，其間隙由盒子的外邊距決定，并且，當<b>同一個BFC</b>中的兩個盒子同時具有相對方向的外邊距時，其外邊距還會發(fā)生<b>疊加</b>(Margin Collapse)
2.BFC內(nèi)部，無論是浮動盒子還是普通盒子，其左<b>總是</b>與包含塊的左邊相接觸
3.BFC 區(qū)域<b>不會</b>與float box區(qū)域相疊加
4.BFC內(nèi)外布局<b>不會</b>相互影響
5.計算BFC高度的時候，浮動元素的高度也計算<b>在內(nèi)</b>
觸發(fā)BFC
1.display: table 前后帶有換行符，我們一般也不常用
需要注意的是，display:table 本身并不會創(chuàng)建BFC，但是它會產(chǎn)生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以創(chuàng)建新的BFC，換句話說，觸發(fā)塊級格式化上下文的是匿名框，而不是display:table。所以通過display:table和display:table-cell創(chuàng)建的BFC效果是不一樣的。
2.overflow: scroll 可能會出現(xiàn)不想要的滾動條，丑
3.float: left 萬一我們不想讓元素浮動呢？
4.overflow: hidden比較完美的創(chuàng)建BFC的方案，副作用較小，仿佛遇到了我的心動女生
BFC能解決的問題
1.margin collapse(外邊距疊加)
2.清除浮動
3.實現(xiàn)兩欄布局
參考文章：
css中的BFC
overflow 與布局上下文（BFC）
那些年我們一起清除過的浮動
另外，今天的培訓還學到一個詞，叫Flex布局，其實早在2014年的時候吧就聽說過了，一直沒用過，一直也沒有去學習一下，嗯，先記著，下次有時間一定要學習一下。
Flex 布局教程：語法篇
Flex 布局教程：實例篇
