This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Parent collapse

Because float positioning is not part of normal page flow, when children are floating elements, the non-floating parent container does not consider the position of the child elements in the display, which causes the parent element to collapse.

Solution: Clear the float

2. Insert and clear floating block-level elements before the parent element ends. 3. Add a pseudo-element to the parent element and clear the pseudo-element. 4. Set the parent container to be a BFC container, which allows the height of the floating element to be counted in the parent container

Block Formatting Context (BFC) Block Formatting Context

According to W3C standards, all elements on a page have an obscure property called Block Formatting Context (BFC), which can be turned on or off. It is turned off by default

When the BFC is turned on, the element has the following properties:

  1. When calculating the height of the BFC container, floating elements are also involved
  2. The BFC is an isolated, standalone container on the page
  3. BFC can be used to solve the problems caused by the overlapping characteristics of margin

In general, the BFC creates an extra closed box on the page where elements, no matter how big they are, can’t affect the outside elements, so we can clean up the float and collapse.

Create conditions

  1. Change overflow values to Auto, hidden, overlay, Scroll
  2. Float (element float is not none)
  3. Absolute and fixed position
  4. Inline-block level
  5. Table cell (display: table-cell)
  6. Flexible box (Flex, inline-flex)

Billion points to note

The BFC is described in the MDN as follows: the BFC contains all the children of the context element, but does not contain the inner element of the child of the new BFC. That is, once a Div container is created as a BFC container, it applies to all its child elements. A container contains B, C, D, E, and F. As long as A container is set as A BFC container, all the elements in A container are in the BFC environment, which must meet the characteristics of BFC.