Block formatting contexts (Block-level formatting context)

In the above "Clear floating", Kayo describes BFC in details, that is, block formatting contexts (Block-level formatcontext ), this article will further describe the features of BFC Based on the section above on BFC.

But before further explaining the features of BFC, Kayo should first introduce another concept that has a very important position in the visual formatting model of CSS-Positioning Solution. The positioning Scheme controls the layout of elements. In css 2.1, there are three positioning schemes: normal flow, floats, and absolute positioning ), the three la s are briefly described below.

Normal Flow)

In a normal stream, elements are arranged horizontally based on their priorities in HTML until the rows are full and then wrap, block-level elements are rendered as a complete new line. Unless otherwise specified, all elements are positioned as normal streams by default. You can also say that, the position of an element in a normal stream is determined by its position in the HTML document.

Floats)

In a floating layout, elements first appear at the position of a normal stream, and then shift to the left or right as much as possible based on the floating direction. The effect is similar to that in the text layout.

Absolute positioning (absolute positioning)

In the absolute positioning layout, the element will be completely isolated from the normal flow, so the absolute positioning element will not affect its brother element (if you read the above children's shoes, it will be found that this is different from the floating element that will affect the sibling element), and the specific position of the element is determined by the absolute positioning coordinate.

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

1. What is BFC?

With the above basics, you can officially introduce BFC. From the perspective of style, elements with BFC are no different from common containers. However, elements with BFC can be considered as isolated independent containers, elements in the container do not affect the elements outside the container layout, and BFC has some features not available in Common Containers. For example, it can contain floating elements, the second method to clear the floating (such as the overflow method) in the above section triggers the BFC of the parent element of the floating element so that it can contain the floating element to prevent high collapse.

In short, BFC is a type of attribute, which affects the positioning of elements and the interaction between them and their sibling elements.

Ii. How to trigger BFC

The definition of BFC is introduced above. How can we trigger BFC?

Elements that meet any of the following conditions are triggered as BFC:

• Floating element, float value except none
• Absolute positioning element, position (absolute, fixed)
• Display is one of the following values: inline-blocks, table-cells, table-Captions
• Value (hidden, auto, scroll) other than visible in Overflow)

However, "display: Table" does not generate BFC, but an anonymous box. The box containing "display: Table-cell" in the anonymous box produces BFC. In short, for "display: Table" elements, the "anonymous" box instead of "display: Table" is generated for BFC ".

In css3, BFC is called flow root and some triggering conditions are added:

• Table-Caption value of Display
• The fixed value of position is actually a subclass of absolute. Therefore, using this value in css2.1 also triggers BFC, but it is more clear in css3.

It is worth noting that Kayo has already explained that BFC is not an element, but some attributes of some elements. Therefore, these elements generate BFC, however, they are not BFC. This concept must be clearly distinguished.

Iii. Features of BFC

As a whole, BFC is an isolated container, which has three features:

1. BFC will prevent the outer margin from being folded

Two Connected divs are superimposed on the vertical margin. Some books will list this issue as a bug. Kayo does not agree here, although this type of folding may cause some inconvenience to developers who are not familiar with CSS layout, it actually has complete and specific folding rules and exists in mainstream browsers, so Kayo thinks this should be a feature of CSS. Of course, in actual development, we may sometimes do not need this fold. In this case, we can use one of the features of BFC to prevent outer margin overlay.

Before giving an example of how BFC can prevent the outer margin from being folded, first describe the rule of the outer margin folding: only when two block-level elements are adjacent and the context is formatted at the same block level, the outer margin between them in the vertical direction is superimposed. That is to say, even if two block-level elements are adjacent, their margins are not folded when they are not formatted in the same block-level context. Therefore, only new BFC is generated to prevent margin collapse.

Effect

You can also view the demo.

For example, each of the three divs contains a P element, and each of the three divs and Their P elements has a margin at the top and bottom, however, only the margin of the third div is not folded with the margin of its child element p. This is because the third Div creates a new BFC. Therefore, it can be seen that the element of BFC is created, and the margin is not folded with its child element.

2. BFC can contain floating Elements

This is exactly the principle of using the overflow: hidden and overflow: auto methods to close the floating. Using overflow: hidden or overflow: auto to trigger the BFC feature of the parent element of the floating element, it can contain floating elements and close floating.

The original W3C text is "'auto' heights for block formatting context roots", that is, BFC automatically adapts to the height based on the condition of sub-elements, even if its sub-elements include floating elements.

Effect

You can also view the demo.

In the above example, there are two divs, each containing a P element with floating settings, but the first Div has a "height collapse ", this is because the internal floating element is out of the normal stream, so the DIV is equivalent to an empty label, without the height and width, that is, the height is 0, and the upper and lower borders overlap. The second Div uses overflow: hidden triggers BFC and can contain floating elements. Therefore, it correctly shows the height and its border position is normal.

3. BFC can prevent elements from being overwritten by floating Elements

As mentioned above, the block-level sibling element of a floating element will ignore the position of the floating element and try to fill the whole row as much as possible, so that it will be overwritten by the floating element, triggering BFC for this sibling element can prevent this situation.

Effect

You can also view the demo.

For example, the DIV with a blue background uses overflow: hidden to trigger BFC. It is not overwritten by its sibling floating element, but beside it. It is worth noting that the sum of the element width does not exceed the width of the parent element. Assume that the width of the floating element and its non-floating sibling element does not exceed the width of the parent element, however, when the width of the two elements exceeds the width of the parent element, the non-floating element is dropped to the next row, that is, it is under the floating element. The effect is as follows:

You can also view the demo.

Iv. BFC and haslayout

Careful kids shoes will find that in the above example, in addition to using overflow: hidden to trigger BFC, A * zomm: 1 attribute is also used, which is iehack, because IE6-7 does not support W3C BFC, it uses the private property haslayout. In terms of performance, haslayout is very similar to BFC, but haslayout itself has many problems, leading to a series of bugs in the IE6-7. The conditions for triggering haslayout are similar to those for triggering BFC. Kayo will write an article for details. Here, Kayo recommends setting the CSS attribute specific to IE for the element ZOOM: 1 to trigger haslayout. Zoom is used to set or retrieve the zoom ratio of the element. If the value is "1", the actual size of the element is used, using ZOOM: 1 can trigger haslayout without affecting the elements, which is more convenient.

At this time, we need to pay attention to one problem: Since haslayout has similar functions as BFC, in actual development, it is necessary to trigger haslayout for elements that need to trigger BFC at the same time, in this way, BFC and haslayout have some special properties that can be generated at the same time in modern browsers and IE, avoiding the difference in the performance of an element between different browsers due to BFC or haslayout. In fact, in actual development, many inexplicable problems are actually caused by this. Of course, if an element does not trigger BFC, try to ensure that it does not trigger haslayout.

This article is published by Kayo Lee. Link: http://kayosite.com/block-formatting-contexts-in-detail.html

 

 

Block formatting contexts (Block-level formatting context)