--
6.BFC 是什么虑绵？如何生成 BFC尿瞭？BFC 有什么作用？舉例說明
BFC的全稱是 Block Format Content直譯為"塊級格式化上下文"翅睛。它是一個獨立的渲染區(qū)域声搁，只有Block-level box參與黑竞， 它規(guī)定了內部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干疏旨。
當父目錄的
- float屬性不為none
- position為absolute或者fixed
- display為inline-block,table-cell,table-caption,fle x,inline-flex很魂，
- overflow不為visible
都會生成BFC。
作用
- 清除浮動
如圖由于內部元素浮動無法撐開父容器
image.png
因此我們可以通過為父容器加入overflow: hidden;觸發(fā)父容器的bfc使父容器計算高度時候把內部的浮動元素包含檐涝。
image.png
- 防止垂直margin重疊（折疊）
如圖當兩個div設置margin:50px時候但是他們之間的距離還是50px說明兩個margin重疊（折疊）了
image.png
在其中一個div父容器加入overflow: hidden;觸發(fā)bfc此時間距變?yōu)?00px
image.png
