BFC及其背後的 float absolute inline-block
此文為經驗之談，感謝張鑫旭大佬
張鑫旭的博客
BFC(Block formatting context)
BFC(Block formatting context)直譯為"塊級格式化上下文"。
它是一個獨立的渲染區域，只有Block-level box參與，
它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。BFC佈局規則：
- 內部的Box會在垂直方向，一個接一個地放置
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。inline float)(浮動流)
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
-
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
- 解決 margin 重疊
-
BFC的區域不會與float box重疊(absolute 與float會重疊)
- 兩欄佈局
-
計算BFC的高度時，浮動元素也參與計算
- 解決父元素高度塌陷 float
3.怎樣觸發BFC
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
float
-
最初的目的:
- 是為了實現 文字環繞效果。
- 雖然與 absolute 一樣會脱離文檔流，但是當清除浮動時候可以撐開父元素高度。
-
實現方式:
- 破壞行框盒子從而導致父元素高度塌陷
-
表現形式:
- 寬度收縮至最小，和absolute,inline-block表現一致。
-
現在的應用:
-
根據BFC的規則浮動的元素不會重疊,從而形成浮動流，超過父元素寬度就會折行。
- 柵格佈局：float+百分比
-
-
清除浮動帶來的影響:父元素高度塌陷
- 通常説的清除浮動其實是清除浮動帶來的破壞，即父元素高度塌陷。
- 根據BFC的定義，BFC會隔離內部元素，所以BFC內部的浮動不會影響外部。
-
例子
- float
absolute,fixed
- 脱離文檔流使父元素高度塌陷，不可避免
- 相對於第一個非static定位的父元素直至跟元素，形成查找鏈
-
transform 會截斷向上查找鏈
- 中間父元素有 transform屬性的話就會基於這個定位。
-
應用:
-
不定寬高元素垂直水平居中
- 實現原理 top，left的百分比相對於定位父元素，此時是左上角居中，
- tranform:translate(-50%,-50%)的百分比相對於自身，在拉回自身一半。
-
-
例子
- absolute
inline-block
- line-height 是行內元素佔據的高度
-
圖片底部有空白
- 原因 圖片默認基線對齊，離底線尚有一定距離
-
解決方案
- line-height<height
- font-size==0
- 另 一個inline-block元素，如果裏面有inline內聯元素，或者overflow是visible，其基線就是元素裏面最後一行內聯元素的基線
否則該元素的基線就是其margin底邊緣。
-
例子:
- inline-block
- 原文地址 BFC及其背後的 float absolute inline-block
- 另外我的博客地址 blog會經常分享 最近的學習內容，項目中遇到的問題及解決方案
