This is the 19th day of my participation in the Genwen Challenge

Block Formatting Context.

What is landing

A BFC is an attribute that affects the positioning of an element and how it interacts with its siblings. Block level formatting context. Is a concept in the W3C CSS 2.1 specification that determines how an element positions its content and how it relates and interacts with other elements. When it comes to box element layout, the BFC provides an environment in which layout according to certain rules does not affect the layout in other environments. For example, a floating element forms a BFC. The children of the floating element are mainly affected by the floating element. The two floating elements are not affected by each other. That is, if an element meets the criteria to be a BFC, the layout and positioning of the elements inside the element is independent of the external elements (unless the inner box creates a new BFC), and is a separate container. (In CSS3, the BFC is called Flow Root)

Conditions for the formation of BFC

  • Float elements, float values other than None;
  • Position (absolute, fixed);
  • Display one of the following values: inline-blocks, table-cells, table-captions;
  • Overflow values other than visible (hidden, auto, scroll)

Common functions of BFC

Floating elements inside the element will drop out of the normal flow, causing the parent element to “highly collapse” and the upper and lower boxes to overlap. The parent element’s BFC feature can be triggered by overflow: Hidden/Auto to contain floating elements and close the float.

Auto’ heights for Block Formatting Context roots, also known as the BFC, will automatically adapt heights based on child elements, even if they include floating elements.

** The block-level sibling of the floating element will be overwritten by the floating element regardless of the position of the floating element, so that the sibling will be overwritten by the floating element. Triggering the BFC for that sibling prevents this from happening. Assume that neither the floating element width nor its non-floating sibling width exceeds the parent element width, but when the combined width exceeds the parent element width, the non-floating element drops to the next line, below the floating element.

** The BFC prevents margin folding ** The margins between two adjacent block-level elements in the same BFC will only stack vertically. That is, even if two block-level elements are adjacent, their margins do not collapse when they are not in the same block-level formatting context. Therefore, preventing margin folding only requires the creation of a new BFC.

Landing and hasLayout

Ie6-7 does not support THE W3C’S BFC, but uses the private hasLayout property. HasLayout is similar to BFC in terms of performance, but hasLayout itself has a number of problems, leading to a number of bugs in IE6-7. Conditions for triggering hasLayout are somewhat similar to those for triggering BFC.

More ways to clear floats

Now that we know how to clear floats in practice, it is easy to imagine that there are more ways to clear floats than just the three mentioned above. For example, using the BFC feature, the following methods can also be used to trigger the BFC and clear floats.

Add a float to the parent element of the float element, but this requires floating all the way to the body and is not recommended.

Adding display: table-cells to the parent of a floating element changes the box model and is not recommended.

It can be seen that although these methods are convenient, they also have obvious disadvantages, which makes the above three methods more suitable for practical projects.

In combination with semantic requirements, it is recommended to use overflow methods or: After pseudo-element methods in real projects. The overflow method can be used directly in cases where all the internal elements are floating elements and the content does not exceed the parent element box. However, this method will trigger the BFC. As mentioned above, the BFC has multiple features. If the actual need to clear the layout of floating elements is complicated, you can simply use the: After pseudo-element method.

The above! Last rule, post my blog, welcome to follow

Please pay attention to the official number: Full stack flying Squadron