Block-level formatting context

Primary knowledge of block-level formatting context (block formatting contexts) preface

There are 3 ways to locate elements in an HTML document (normal, Absolute, floating), except for normal streams, where floating and absolute positioning cause elements to move away from the normal stream and be positioned in their own way.
A container with the BFC attribute is one of the normal streams.

Block-level formatting context (BFC)

The block formatting context is part of the page CSS visual rendering. It is an area used to determine the layout of a block box and the range of floating interactions.

BFC is an attribute that is displayed by an element in the possession of certain properties, with elements of the BFC attribute and elements in other normal streams having no difference in style. But functionally, the inside of a container with BFC is isolated from the outside, that is, the elements inside the container will no longer affect the external elements on the layout.

Containers with the BFC property can contain floating elements, prevent margins from collapsing, and prevent elements from being overwritten by floating elements.

How to Trigger BFC

An element that satisfies either of the following conditions triggers BFC:

• The root element or other element that contains it
• float (float of element is not none)
• Absolutely positioned element (position of element is absolute or fixed)
• Inline block Inline-blocks (element's Display:inline-block)
• Table cell (element's Display:table-cell,html table cell default property)
• Table caption (element display:table-caption, HTML table title default property)
• The value of overflow is not a visible element
• Flexible box Flex boxes (element's Display:flex or Inline-flex)

These are the conditions that raise the BFC property on the MDN.

It is important to note that "display:table" itself does not produce BFC, but rather it produces an anonymous box, and the box containing "Display:table-cell" in the anonymous box produces BFC. In short, for "display:table" elements, the BFC is generated by an anonymous box instead of "display:table".

BFC Feature 1. BFC can contain floating elements

Typically, floating elements break out of a normal stream, affecting not only sibling elements, but also parent containers and parent container sibling elements. For the parent container, the most intuitive is that the parent container is highly collapsed

Add the Overflow:hidden property to the parent container so that it causes the BFC property.

2. Prevent margin folding

Two contiguous div will overlap on the vertical margins.

Detailed explanation: the margins between their vertical orientations are superimposed only if the 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.

Here the parent container has a 20px margin set up and down, while the P element has a 1em upper and lower margin. You can see that the first P element has no spacing from the top of the parent container, and the margins overlap.

The parent container adds the Overflow:hidden property so that it causes the BFC property. Here only the first P element is not collapsed from the margin of the parent container, and the margin between P elements is collapsed.

Wrap the middle P element with a div and add the Overflow:hidden property so that it causes the BFC property.

3. Prevent elements from being overwritten by floating elements

As stated above, floating elements can have an effect on sibling elements. If the sibling element is a block-level element, it overlaps the floating element and is below the floating element. If the element is inline, it is arranged from left to right.

However, if the child element is Display:inline-block, the sum of the child element width is greater than the parent container width, then the last width is added to the child element wrapping that exceeds the parent container width.

BFC Handling Floating

Usually we clear the float in several ways:

• 1. Set Empty div

  Add an empty div at the end of the parent container and set Clear:both to clear the float. This is convenient, but violates the principle of separation of structure and appearance.

• 1. Set overflow

  Although setting other properties can also raise the BFC property, it has some effect on the layout. The effect of setting the Overflow:hidden is relatively small, but when the child element is too large, the excess is overwritten, and the auto or scroll is set to produce a scroll bar.

• 1. : After pseudo element

  By adding a: after pseudo-element to the container and setting the overflow property to the pseudo-element, add iehack to clear the float. is also a more online use of methods.
  . clearfix{(*zoom:1;}
  . Clearfix:after{content: "; height:0;display:block; Clear:both;/overflow:hidden; /*clear,overflow two SELECT */}

IE6, 7 under the BFC

Because the early IE6, 7 for not support BFC, so need to resolve through iehack. In IE6, 7, the BFC effect is achieved by triggering the Haslayout private property. From the perspective of Use, haslayout private properties and BFC trigger are triggered by the unique properties, IE6, 7 mostly by setting the zoom:1; trigger, zoom to set or retrieve the element scale, the value 1 represents the element's actual size, so setting 1 does not affect the element display.

Block-level formatting context