BFC與IFC

BlackFlagBin 發布于2019-08-29 12:22 / 2140人閱讀

摘要：屬于同一個的兩個相鄰的會發生重疊。的區域不會與重疊。計算的高度時，浮動元素也參與計算。給添加，觸發新的，則行內級格式化上下文如何生成由的非替換元素生成。元素會位于與與之間，使得寬度縮短。

block-level box: display屬性為block, list-item, table的元素，會生成block-level box。并且參與block fomatting context。

inline-level box: display屬性為inline, inline-block, inline-table的元素，會生成inline-level box。并且參與inline formatting context。

run-in box: css3中才有。

BFC（Block Formatting Contexts）塊級格式化上下文

塊格式化上下文（block formatting context）是一個獨立的渲染區域，容器里面的子元素不會在布局上影響到外面的元素。只有Block-level box參與，它規定了內部的Block-level Box如何布局。塊格式化上下文包括了創建該上下文的元素的所有子元素，但不包括創建了新的塊格式化上下文的子元素。

如何生成

根元素

float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

布局規則

內部的Box會在垂直方向，一個接一個地放置。

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊。

每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

BFC的區域不會與float box重疊。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算。

應用

解決margin重疊問題

解決float導致高度塌陷問題

解決文字環繞問題（該方法可用于自適應布局）

例如：

.containbox {
    border: 1px solid black;
    width: 300px;
    height: 300px;
  }
  
  .leftbox {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  
  .rightbox {
    height: 250px;
    background-color: #fff500;
  }

    
    rightbox占滿containbox的整個寬度。但是因為rightbox中的文字會為leftbox讓位，所以看起來的效果就像是rightbox自動占滿了剩余空間，超過leftbox高度部分的rightbox的左邊框緊貼containbox的左邊。

給rightbox添加overflow: hidden，觸發新的BFC，則

IFC（Inline Formatting Contexts）行內級格式化上下文 如何生成

由display:inline 的非替換元素生成。可替換行內元素，或 display 值為 inline-block 或 inline-table 的元素不能生成IFC，因此不能拆分成多個盒。
例如：

.containbox {
    border: 1px solid black;
    width: 12em;
  }

    span 里的文本 可以分成多行,因為它 是個行內盒。

給innertext添加display: inline-block，則span里的文本因為剩余空間放不下，就另起一行開始放。

布局規則

內部的盒子會在水平方向，一個接一個地放置。

這些盒子垂直方向的起點從包含塊盒子的頂部開始。

擺放這些盒子的時候，它們在水平方向上的 padding、border、margin 所占用的空間都會被考慮在內。

在垂直方向上，這些框可能會以不同形式來對齊（vertical-align）：它們可能會使用底部或頂部對齊，也可能通過其內部的文本基線（baseline）對齊。

能把在一行上的框都完全包含進去的一個矩形區域，被稱為該行的行框（line box）。行框的寬度是由包含塊（containing box）和存在的浮動來決定。

IFC中的 line box 一般左右邊都貼緊其包含塊，但是會因為float元素的存在發生變化。float 元素會位于IFC與與 line box 之間，使得 line box 寬度縮短。

IFC 中的 line box 高度由 CSS 行高計算規則來確定，同個 IFC 下的多個 line box 高度可能會不同（比如一行包含了較高的圖片，而另一行只有文本）

當 inline-level boxes 的總寬度少于包含它們的 line box 時，其水平渲染規則由 text-align 屬性來確定，如果取值為 justify，那么瀏覽器會對 inline-boxes（注意不是inline-table 和 inline-block boxes）中的文字和空格做出拉伸。

當一個 inline box 超過 line box 的寬度時，它會被分割成多個boxes，這些 boxes 被分布在多個 line box 里。如果一個 inline box 不能被分割（比如只包含單個字符，或 word-breaking 機制被禁用，或該行內框受 white-space 屬性值為 nowrap 或 pre 的影響），那么這個 inline box 將溢出這個 line box。

line box 的生存條件是在IFC中并且包含inline-level元素，如果line box里沒有文本，空白，margin/padding/border 非0的行內元素，以及其他常規流中的內容(比如，images，inline blocks 和 inline tables)，并且不是以換行結束的，將被當作零高度行框對待，也將會被視為沒有意義。

注意：

在IFC的環境中，是不能存在block-level元素的，如果將block-level元素插入到IFC中，那么此IFC將會被破壞掉，而block-level元素前的元素和block-level元素后的元素將會各自自動產生一個匿名容器其包圍，這個匿名的容器內部環境將是一個新的 IFC。

設置一個塊為 inline-block ，以單個封閉塊來參與外部的 IFC，而內部則生成了一個 BFC。

參考自：
視覺格式化模型
KB010: 常規流
Inline formatting contexts
談談一些有趣的CSS題目

GPU云服務器云服務器 IFC bfc bfc布局云主機與與空間

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111848.html

css布局的各種FC簡單介紹：BFC，IFC，GFC，FFC

摘要：完整的說法是屬于同一個的倆個相鄰的的會發生重疊，與方向無關。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個維度了。什么是FC？ Formatting Context，格式化上下文，指頁面中一個渲染區域，擁有一套渲染規則，它決定了其子元素如何定位，以及與其他元素的相互關系和作用。 BFC 什么是BFC Block Formatting Context，塊級格式...

mindwind 2019-08-29 15:24 評論0 收藏0
css布局的各種FC簡單介紹：BFC，IFC，GFC，FFC

摘要：完整的說法是屬于同一個的倆個相鄰的的會發生重疊，與方向無關。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個維度了。什么是FC？ Formatting Context，格式化上下文，指頁面中一個渲染區域，擁有一套渲染規則，它決定了其子元素如何定位，以及與其他元素的相互關系和作用。 BFC 什么是BFC Block Formatting Context，塊級格式...

付永剛 2019-08-02 10:27 評論0 收藏0
CSS里的BFC和IFC的用法

摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時，子元素會換到下一行顯示，并且會產生新的行框。一、BFC Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則。（可以把 BFC 理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素）。 1、BFC的布局規則例如以下： ①.內...

ityouknow 2019-08-02 16:17 評論0 收藏0
CSS里的BFC和IFC的用法

摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時，子元素會換到下一行顯示，并且會產生新的行框。一、BFC Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則。（可以把 BFC 理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素）。 1、BFC的布局規則例如以下： ①.內...

BaronZhang 2019-08-30 10:51 評論0 收藏0