BFC,IFC,GFC and FFC in the CSS3 (reproduced)

Author's original website: http://www.cnblogs.com/dingyufenglian/p/4845477.html

What ' s FC?

Must not be KFC,FC the full name is: Formatting contexts, is a concept in the CSS2.1 specification. It is a rendered area of the page and has a set of rendering rules that determine how its child elements will be positioned, and the relationships and interactions with other elements.

BFC

The BFC (block formatting contexts) literal is a "chunk-level formatting context." Block formatting contexts is an isolated rendering area on the page, and the child elements inside the container do not affect the outside elements on the layout, and vice versa. How to generate BFC?

The value of float is not none.

The value of the overflow is not visible.

The value of position is not relative and static.

The value of display is Table-cell, table-caption, any of the inline-block.

What is the use of the BFC in general? For example, the common multi-column layout, combined with block-level elements floating, the elements are in a relatively isolated environment to run.

Ifc

IFC (inline formatting contexts) is an "inline formatting context", and the IFC's Line box (wireframe) height is calculated from the highest actual height of its containing inline elements (unaffected by vertical padding/margin)

The line box in IFC generally snaps to the entire IFC, but is disturbed by the float element. The float element is located between the IFC and the Line box, making the Line box width shorter. Multiple Line box heights under the same IFC will be different. In IFC, it is impossible to have block-level elements, when inserting block-level elements (such as insert Div in P) will result in two anonymous blocks separated from the Div, which produces two IFC, each of which is represented as a block-level element, and is arranged vertically in a div.

So what's the use of IFC in general?

Center horizontally: When a block is centered horizontally in the environment, setting it to Inline-block generates IFC in the outer layer, which can be centered horizontally by text-align.

Center vertically: Creates an IFC that uses one of the elements to open the height of the parent element, then sets its vertical-align:middle, and the other inline elements can be vertically centered under this parent element.

GFC

GFC (GridLayout formatting contexts) literal is "Grid layout formatting context", when setting display value to grid for an element, this element will get a separate render area, we can pass in the grid container (grid Container) defines the grid definition row (grid definition rows) and Grid definition column (grid definition Columns) properties on the grid item (grid row) and Grid columns (grid Columns) defines the location and space for each grid item (grid item).

So what's the use of GFC, and what's the difference with table? The first is also a two-dimensional table, but GridLayout will have richer properties to control the rows and columns, control alignment, and finer rendering semantics and control.

Ffc

The FFC (flex formatting contexts) literal is the "adaptive formatting Context", and an element with the display value of Flex or Inline-flex will generate an adaptive container (Flex container). Unfortunately this awesome property only Google and Firefox support, but on the mobile side is enough, at least Safari and Chrome is OK, after all, these two on the mobile side is king.

The Flex Box consists of a telescopic container and a telescopic project. A telescopic container can be obtained by setting the display property of the element for flex or Inline-flex. A container set to Flex is rendered as a block-level element, while a container set to Inline-flex is rendered as a inline element.

Each child element in a telescopic container is a scaling project. The scaling project can be any number. All elements inside and outside the telescopic container are unaffected. Simply put, Flexbox defines how the scaling items in the telescopic container should be laid out.

BFC,IFC,GFC and FFC in the CSS3 (reproduced)