一文带你吃透BFC
文章目錄
- 面試高出場率
- 什么是BFC
- 觸發BFC的條件
- BFC的約束規則
- BFC可以解決的問題
面試高出場率
在前端的面試中，經常會遇到BFC的問題，比如：說說你對BFC的理解、你在項目中運用到的BFC、BFC是什么、BFC的作用是什么。。。。
很多同學很懵逼，不知道這個問題在問什么，在這里小編就給大家講解一下關于BFC
小提示：這個問題重點是BFC是什么，BFC觸發的條件有哪些，BFC可以干什么。這里我們可以試著講解了一下Boostrap的清除浮動（display：table創建匿名table-cell間接觸發BFC），如果有看到別的場景使用或者自身有使用的場景可以嘗試講解一下使用技巧。這樣可以讓面試官覺得你不僅僅知道他問的東西是什么，你還能很好的使用它。
什么是BFC
BFC 全稱為塊級格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位以及與其他元素的關系和相互作用，當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。這里有點類似一個BFC就是一個獨立的行政單位的意思。可以說BFC就是一個作用范圍，把它理解成是一個獨立的容器，并且這個容器里box的布局與這個容器外的box毫不相干。
觸發BFC的條件
- 根元素或其它包含它的元素
- 浮動元素 (元素的 float 不是 none)
- 絕對定位元素 (元素具有 position 為 absolute 或 fixed)
- 內聯塊 (元素具有 display: inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
- 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
- 具有overflow 且值不是 visible 的塊元素
- 彈性盒（flex或inline-flex）
- display: flow-root
- column-span: all
BFC的約束規則
- 內部的盒會在垂直方向一個接一個排列（可以看作BFC中有一個的常規流）
- 處于同一個BFC中的元素相互影響，可能會發生外邊距重疊
- 每個元素的margin box的左邊，與容器塊border box的左邊相接觸(對于從左往右的格式化，否則相反)，即使存在浮動也是如此
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然
- 計算BFC的高度時，考慮BFC所包含的所有元素，連浮動元素也參與計算
- 浮動盒區域不疊加到BFC上
BFC可以解決的問題
垂直外邊距重疊問題
去除浮動
自適用兩列布局（float + overflow）
總結
