CSS-BFC

Visual formatting model

是用來處理和在視覺媒體上顯示文檔時使用的計算規(guī)則。該模型是 CSS 的基礎概念之一。

就是一套處理和顯示文檔的計算規(guī)則。

幾個概念

// 下面的總結忽略 有問題
1. [block container](https://developer.mozilla.org/zh-CN/docs/Web/CSS/All_About_The_Containing_Block)
布局參考容器

2. `block-level element` 
css規(guī)定的默認是`block-level boxes`的標簽元素
3. `block-level boxes`
遵守`block formatting context`規(guī)則的盒子（可能默認并不遵守）
`block container box` 是只包含 `block-level boxes`的容器盒子，或者給它改成遵守 `inline formatting context` 規(guī)則，只包含 `block-level boxes`的容器盒子
  1. BFC (block formatting context )
    是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域
    （1）從父容器的頂部開始
    （2）水平方向上，緊貼左邊（或者緊貼右側）
    （2）垂直方向上 一個挨著一個排列
    （3）兩個相鄰盒子的垂直方向上的間距有margin決定，并且存在合并情況（取最大值）

IFC (Inline Format Context)

一個block container box 包含了 no block-level boxes
布局規(guī)則
（1）水平排列，一個挨著一個
（2）垂直方向上從容器盒子的頂部開始
（3）垂直方向上 可能以不同的方式排版：頂部、底部、基線等。
（4）......

布局模式

  1. Normal flow
  2. float
  3. absolute
  4. flex
  5. grid
  6. table

參考：

  1. https://www.w3.org/TR/CSS22/
  2. https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#DOM-CSS_CSSOM
  3. https://www.w3cplus.com/search/node/BFC
  4. https://www.zhihu.com/question/20086234
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容