CSS BFC (Block formatting Context)

Before I did not know BFC is what, today to see only know the original before often contact, just do not know the professional name. Like closures, inheritance, often used before, just do not know, today I would like to say, CSS positioning of the BFC.

BFC is related to clear float, so let's say, how to clear the float, clear floating mainly there are two ways:

① use the Clear property to clear floating

② the parent container to form BFC

Before I talk about BCF, let me start by saying that we typically control the placement of elements in 3 main ways: normal flow, floating (floats), and absolute positioning (Absolute positioning)

Normal stream (normal flow)

In a normal stream, the element is laid out in the first place in the HTML, in which the elements of the line are arranged horizontally until the line is filled and then wrapped, and the block-level element is rendered as a complete new row, unless otherwise specified, all elements default to normal flow positioning, or The position of an element in a normal stream is determined by the position of the element in the HTML document.

Floating (floats)

In a floating layout, the element first appears in the position of the normal stream, and then offsets as far as possible to the left or right, depending on the direction of the float.

Absolute positioning (Absolute positioning)

In an absolutely positioned layout, the element is completely detached from the normal flow, so the absolutely positioned element does not affect its sibling elements (while the floating element affects the sibling element), and the exact position of the elements is determined by the coordinates of the absolute positioning.

BFC is a normal stream, so it has no effect on sibling elements.

Definition of &&--BFC--&&

In the case of the box element layout, BFC provides an environment in which the layout according to certain rules does not affect the layout in other environments. For example, floating elements can form BFC, and the elements inside the floating element are mainly affected by the floating element, and the two floating elements are not affected by each other. That is, if an element conforms to a condition that becomes BFC, the layout and positioning of elements inside the element are independent of the external elements (unless the inner box establishes a new BFC), which is an isolated container.

What the hell is &&--BFC--&&?

When it comes to visual layouts, Block formatting context provides an environment in which HTML elements are laid out according to certain rules. The elements in one environment do not affect the layout in other environments. For example, floating elements can form BFC, and the elements inside the floating element are mainly affected by the floating element, and the two floating elements are not affected by each other. Here is a bit like a BFC is an independent administrative unit meaning.

&&--How to form bfc--&&

The value of ①float is not none.

The value of the ②overflow is not visible.

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

The value of ④position is not relative and static.

Flex boxes in ⑤CSS3

The role of &&--BFC--&&

① contains floating elements (clear float)

The BFC adapts the height according to the child element, which is a overflow:hidden/auto/scroll, float:left/right style that can be closed to the parent element.

② not covered by floating elements
Floating elements ignore the presence of sibling elements, which are overlaid on top of the sibling element, and can be prevented by creating BFC for the sibling element.

&&--BFC has three main properties--&&

①BFC will prevent margins from collapsing
Two connected p are superimposed on the vertical margin, and in actual development, perhaps we sometimes do not need this kind of folding, then we can take advantage of one of the characteristics of BFC-block margin overlay. Prevents margin folding for parent-child elements, and 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. The element that BFC at the same time, does not and its child elements occur outside the margin folds.

②BFC can contain floating elements
This is also the principle above using the Overflow:hidden and Overflow:auto method to close the float, using Overflow:hidden or Overflow:auto to trigger the BFC of the parent element of the floating element, which can contain floating elements, closed floating Move.

The original text is "' Auto ' heights for block formatting context roots", that is, BFC will automatically adapt to the height of the child element, even if its child elements include floating elements.

But Ie6-7 does not support the BFC, but uses its own haslayout. In terms of performance, it is very similar to BFC, but Haslayout itself has many problems, resulting in a series of bugs in Ie6-7. Trigger haslayout conditions and trigger BFC somewhat similar, the specific situation Kayo will write another article introduction. Here Kayo recommended for the element set IE specific CSS properties Zoom:1 trigger Haslayout, zoom to set or retrieve the scale of the element, the value of "1" is the actual size of the element, using the zoom:1 can trigger both haslayout and not the element will be more convenient to other influences.

③BFC can prevent elements from being overwritten by floating elements
As mentioned above, the block sibling element of a floating element ignores the position of the floating element and fills the entire line as much as possible, so that it is overwritten by a floating element and can be prevented by triggering BFC for the sibling element.