Personal understanding of the blocky formatting context

The first time you see the cascade context this thing does not know what this is, to see some of the great God's articles, and then found similar to have BFC, and then involved a series of what is FC, what is BFC, what is IFC and so on. The following things are excerpts of other people's articles and some of their own understanding, to facilitate their own memories of it.

FC (formatting context) translates to a formatted context/format range, which refers to a piece of area in a page layout that has its own rendering rules, determines how its child elements are laid out, and relationships and roles with other elements.

According to CSS display classification, XHTML elements are divided into three types: block elements, inline elements, mutable elements. When adding a style to a page element, we need to know what type this element is, and then we can convert the element type ourselves. Just as we can make an inline element into a block element (Display:block) through display. There are several special elements img,input default is Inline-block;

BFC (Block-level formatting context), only blocky elements work. The relative entitlement to IFC is an inline element. (I don't know if I understand that right).

What is a block formatting context (BFC)? Equivalent to a special area.

If an element conforms to a condition that becomes BFC, the element becomes a separate, isolated container, and the element's inner elements are arranged vertically along the border of their parent element, and the outer elements do not affect each other.

The conditions for triggering BFC are as follows:

• float element, float value other than none
• Absolute positioning element, position (absolute,fixed)
• Display is the value of one of the following inline-blocks,table-cells,table-captions. is a block container that's not a block-level box.
• Overflow values other than visible (Hidden,auto,scroll)

If one of these four conditions is met, a BFC is created, and the content in it is in the context of the BFC environment.

In CSS3, BFC is called Flow Root and adds some trigger conditions:

• Table-caption Value of Display
• The fixed value of position, in fact, fixed is a subclass of absolute, so the use of this value in CSS2.1 will also trigger BFC, only in the CSS3 more clear this point.

Element settings IE specific CSS properties Zoom:1 trigger Haslayout, zoom is used to set or retrieve the scale of the element, the value of "1" is the actual size of the element, using Zoom:1 can trigger both haslayout and no other impact on the element, relative will More convenient. This is the situation under IE

The role of BFC:

(1) BFC will prevent margin folding

I understand that folding means that the margin will overlap, and will not be divided very clear, like yours is Mine, mine is yours.

Margins collapsed rule: the margins between their vertical orientations are superimposed only if two block-level elements are adjacent and the context is formatted at the same block level. That is, even if two block-level elements are adjacent, their margins are not collapsed when they are not in the same block level format context. Therefore, stopping the margin folding simply produces a new BFC.

However, for the two adjacent elements, the meaning is not significant, there is no need to add a shell, but for nested elements is necessary, as long as the parent element is set to BFC can be. The margin of the element will not collapse with the margin of the parent element.

(2) BFC can contain floating elements

This means that the BFC neutron element does not exceed his containing block, while the element position to absolute can exceed the bounds of his containing block

(3) BFC can prevent elements from being overwritten by floating elements

This is based on the left side of the margin box for each element, in contact with the left side of the containing block border box (for formatting from left to right, or vice versa). This is true even if there is a float. This principle is realized.

Http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html This great God summarizes the blog is relatively simple and clear.

Personal understanding of the blocky formatting context