BFC IFC GFC FFC的理解

FC:formatting context 格式化上下文。
css2.1定義了 BFC 塊級格式化上下文 + IFC 行內格式化上下文。
css3新定義了 GFC網格布局格式化上下文 + FFC 自適應格式化上下文。

其實就是對于塊級盒模型、行內盒模型的一些渲染規(guī)則的定義,決定了元素如何排列、相互影響等。

BFC規(guī)定:浮動元素與生成BFC的元素不互相覆蓋,所以可以用來進行多列布局,如:左右兩列分別左右浮動,中間的內容區(qū)自適應。
子元素浮動,父元素設置overflow:hidden的原理是:通過設置overflow:hidden,觸發(fā)父元素生成BFC塊(渲染規(guī)則規(guī)定:BFC塊之間外邊距不互相重疊),在計算高度時包含浮動子元素。

GFC:是針對那些display:grid的元素的渲染規(guī)則。
網格布局并沒有flex布局應用的廣泛,flex相對常用一些,但是用grid實現(xiàn)多行布局,更加好理解。

.parent { display: grid;grid-columns: 100px 200px 1fr;grid-rows:50px 200px 1fr;}//定義網格的行數(shù)、列數(shù)
.cell {grid-column:2;grid-row: 1;}//定義單元格的位置
//或者通過單元格命名的方式,此處不詳述

FFC:是針對display:flex的元素的渲染規(guī)則(流式布局,自適應伸縮)。

.parent{display:flex;flex-direction:row || column;align-items:flex-start || flex-end || center || strech || baseline;justify-content: flex-start || flex-end || center || space-around || space-between;align-self: auto};//定義布局方向、對齊方式等
.cell {flex:1;}//定義自身占比

參考文章:
http://www.cnblogs.com/dingyufenglian/p/4845477.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,805評論 1 92
  • BFC 已經是一個耳聽熟聞的詞語了,網上有許多關于 BFC 的文章,介紹了如何觸發(fā) BFC 以及 BFC 的一些用...
    一木_qintb閱讀 1,540評論 0 2
  • BFC 已經是一個耳聽熟聞的詞語了,網上有許多關于 BFC 的文章,介紹了如何觸發(fā) BFC 以及 BFC 的一些用...
    _Yfling閱讀 423評論 0 0
  • 作者:Zhouxing Su鏈接:https://www.zhihu.com/question/19689000/...
    HowieCheng閱讀 2,887評論 0 0
  • 所謂房產,是指有墻面和立體結構,能夠遮風避雨,可供人們在其中生活、學習、工作、娛樂、居住或貯藏物資的場所。 在中國...
    五知水閱讀 208評論 0 1