CSS之BFC(Block Formatting Context)

I didn’t know what BFC was before. After reading it today, I realized that I had been exposed to it often before, but I just didn’t know the professional name. Just like closures and inheritance, they were often used before, but I just didn’t know it. Today I will talk about BFC of CSS positioning.

BFC is related to clearing floats, so let’s talk about how to clear floats. There are two main ways to clear floats:

①Use the clear attribute to clear floats

② Make the parent container form a BFC

Before talking about BCF, I want to say that there are three main positioning schemes for controlling the layout of elements: Normal Flow and Floats. and Absolute Positioning

***Normal Flow

In normal flow, elements are laid out from top to bottom according to their sequential positions in HTML. In this process , the in-line elements are arranged horizontally until the line is full and then the line breaks, and the block-level elements will be rendered as a complete new line. Unless otherwise specified, all elements are positioned in the normal flow by default. It can also be said that in the normal flow The position of an element is determined by its position in the HTML document.

***Floats

In a float layout, elements first appear according to the position of the normal flow, and then are offset to the left or right as much as possible according to the direction of the float.

***Absolute Positioning

In an absolutely positioned layout, the element will be separated from the normal flow as a whole, so the absolutely positioned element will not affect its sibling elements (while floating elements will affect sibling elements), and the specific position of the element is determined by the coordinates of absolute positioning.

BFC belongs to the ordinary stream, so it will not have any impact on sibling elements.

&&--Definition of BFC--&&

When laying out box elements, BFC provides an environment in which layout according to certain rules will not affect to the layout in other environments. For example, floating elements will form a BFC. The sub-elements within the floating element are mainly affected by the floating element, and the two floating elements have no influence on each other. In other words, if an element meets the conditions for becoming a BFC, the layout and positioning of the internal elements of the element will not affect each other (unless the internal box creates a new BFC), and it will be an isolated independent container.

&&--What exactly is BFC--&&

When it comes to visual layout, Block Formatting Context provides an environment in which HTML elements are laid out according to certain rules. Elements in one environment do not affect the layout of other environments. For example, floating elements will form a BFC. The sub-elements within the floating element are mainly affected by the floating element, and the two floating elements do not affect each other. This is somewhat similar to the idea that a BFC is an independent administrative unit.

&&--How to form BFC--&&

①The value of float is not none.

②The value of overflow is not visible.

③The value of display is any one of table-cell, table-caption, and inline-block.

④The value of position is not relative or static.

⑤Flex boxes in css3

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

①Contains floating elements (clear floats)

BFC will be based on child elements Adaptive height to the situation. This feature is to use overflow:hidden/auto/scroll, float:left/right styles on the parent element to close the float.

②Not covered by floating elements
Floating elements will be ignored The existence of sibling elements covers the sibling elements. Creating a BFC for the sibling elements can prevent this situation from happening

&&--BFC mainly has three characteristics--&&

①BFC Will prevent the margins from folding
The vertical margins of two connected p's will overlap. In actual development, we may sometimes not need this kind of folding. In this case, we can use one of the features of BFC - prevent Margins overlap. Prevents margin collapse of parent and child elements. Only when two block-level elements are adjacent and in the same block-level formatting context, the vertical margins between them will overlap. That is, even if two block-level elements are adjacent, their margins will not collapse when they are not in the same block-level formatting context. At the same time, the BFC element does not have margins collapsed with its child elements.

②BFC can contain floating elements
This is exactly the principle of using the overflow: hidden and overflow: auto methods to close the float above. Use overflow: hidden or overflow: auto to trigger the BFC feature of the parent element of the floating element. , so that you can contain floating elements and close the float.

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

But IE6-7 does not support W3C's BFC, but uses its own hasLayout. In terms of performance, it is very similar to BFC, except that hasLayout itself has many problems, leading to a series of bugs in IE6-7. The conditions for triggering hasLayout are somewhat similar to triggering BFC. Kayo will write another article to introduce the specific situation. Here Kayo recommends setting the IE-specific CSS property zoom: 1 to trigger hasLayout. zoom is used to set or retrieve the zoom ratio of the element. A value of "1" means using the actual size of the element. Using zoom: 1 can trigger hasLayout without It will have other effects on the elements, which is relatively more convenient.

③BFC can prevent elements from being covered by floating elements
As mentioned above, the block sibling elements of the floating element will ignore the position of the floating element and try to occupy the entire row, so that they will be covered by the floating element. , triggering BFC for this sibling element can prevent this from happening.

For more CSS BFC (Block Formatting Context) related articles, please pay attention to the PHP Chinese website!