How do I create a block-level formatting context? The role of the block-level formatting context

What is a block-level formatting context in CSS? Block-level formatting context (block formatting context) is part of the Web page CSS visual rendering and is used to determine the layout of the Block box. In the positioning system (positioning Scheme) it belongs to the regular flow, so how do you create a block-level formatting context? What conditions are required to create block-level formatting? This article will give you one by one instructions.

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;

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:

1, floating element, float except none value

2, absolute positioning elements, position (absolute,fixed)

3, display for one of the following values inline-blocks,table-cells,table-captions. is a block container that's not a block-level box.

4, overflow except visible value (Hidden,auto,scroll)

With one of these four conditions in place, you can create a block-level formatting context where the content is in the context of a block-level formatting environment.

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

1, display of the table-caption value

2, Position fixed value, in fact, fixed is a subclass of absolute, so the use of this value in CSS2.1 will also trigger BFC, but in 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 the block-level formatting context (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.