資訊專欄INFORMATION COLUMN
摘要：指頁面中一個渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。兩個同胞盒間的垂直距離取決于屬性。同一個塊格式化上下文中的相鄰塊級盒的垂直外邊距將折疊。
FC（Formatting Context）指頁面中一個渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。常見的FC有BFC、IFC，GFC和FFC。
BFCBFC(block formatting context)直譯為"塊格式化上下文"。
block - 塊級盒參與塊格式化上下文
context - 這里的上下文指一個流：普通文檔流, float, position
它是一個獨立的渲染區(qū)域。它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。
觸發(fā)條件the root element or something that contains it - 根元素或其它包含它的元素
floats (elements where float is not none) - 浮動元素 (元素的 float 不是 none)
absolutely positioned elements (elements where position is absolute or fixed) - 絕對定位元素 (元素的 position 為 absolute 或 fixed)
inline-blocks (elements with display: inline-block) - 內(nèi)聯(lián)塊 (元素具有 display: inline-block)
table cells (elements with display: table-cell, which is the default for HTML table cells) - 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
table captions (elements with display: table-caption, which is the default for HTML table captions) - 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認屬性)
anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers and table footers, respectively), or inline-table - 匿名表格元素，在元素display：table, table-row, table-row-group, table-header-group, table-footer-group(分別是默認的HTML表、表行,表,表頭和表頁腳)，inline-table時創(chuàng)建
block elements where overflow has a value other than visible - 具有overflow 且值不是 visible 的塊元素
display: flow-root
elements with contain: layout, content, or strict - 元素有contains屬性，值為layout, content, or strict
flex items (direct children of the element with display: flex or inline-flex) - flex items（display: flex or inline-flex元素的直接子元素）
grid items (direct children of the element with display: grid or inline-grid) - grid items（display: grid or inline-grid）
multicol containers (elements where column-count or column-width is not auto, including elements with column-count: 1) - multicol containers（元素的column-count或者column-width不是auto，包括元素column-count設(shè)置成1）
column-span: all should always create a new formatting context, - even when the column-span: all element isn"t contained by a multicol container - column-span: all 總是會創(chuàng)建一個新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。
截止到2018.1.9為止，查看最新的觸發(fā)條件 MDN鏈接
約束規(guī)則在塊格式化上下文中，盒從包含塊頂部一個接一個地垂直擺放。
兩個同胞盒間的垂直距離取決于 margin 屬性。
同一個塊格式化上下文中的相鄰塊級盒的垂直外邊距將折疊。
每個盒的左外邊緣緊貼包含塊的左邊緣（從右到左的格式里，則為盒右外邊緣緊貼包含塊右邊緣），有浮動也是如此
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。外面的元素不會影響到容器內(nèi)的子元素。
計算BFC的高度時，浮動元素也參與計算
IFC GFC，F(xiàn)FCGFC，F(xiàn)FC是在css3提出的規(guī)范，后面會結(jié)果flex和grid做總結(jié)。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112977.html
摘要：中各種布局的背后，實質(zhì)上是各種的組合。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒，用于表示一行。彈性容器外和彈性項目內(nèi)的一切元素都不受影響。 CSS中各種布局的背后，實質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...
摘要：下面就來介紹和的布局規(guī)則。布局規(guī)則原文整理為中文內(nèi)部的會在垂直方向，一個接一個地放置。解決方案為加上使其形成，根據(jù)規(guī)則第六條，計算高度時就會計算的元素的高度，達到清除浮動影響的效果。并為這個外層元素設(shè)置，使其形成。 想要理解BFC與IFC，首先要理解另外兩個概念：Box 和 FC（即 formatting context）。 Box 一個頁面是由很多個 Box 組成的，元素的類型和 d...
摘要：完整的說法是屬于同一個的倆個相鄰的的會發(fā)生重疊，與方向無關(guān)。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個維度了。 什么是FC？ Formatting Context，格式化上下文，指頁面中一個渲染區(qū)域，擁有一套渲染規(guī)則，它決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。 BFC 什么是BFC Block Formatting Context，塊級格式...
閱讀 3685·2021-09-07 10:19
閱讀 3626·2021-09-03 10:42
閱讀 3583·2021-09-03 10:28
閱讀 2548·2019-08-29 14:11
閱讀 808·2019-08-29 13:54
閱讀 1593·2019-08-29 12:14
閱讀 416·2019-08-26 12:12
閱讀 3613·2019-08-26 10:45
