BFC及其背後的 float absolute inline-block

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會常常分享 最近的學習內容，項目中遇到的問題及解決方案