Clear floating principle, clear principle, bfc principle

One, clear

The clear attribute defines on which side of the element floating elements are not allowed. Instead of making the floating element non-floating, the floating elements around the element are placed on the next line.

 left: Floating elements are not allowed on the left side
right: Floating elements are not allowed on the right side
both: Floating elements are not allowed on the left and right sides
none: Default. Allows floated elements to appear on both sides.

It is recommended to use the pseudo-element method to clear the floating, the code is as follows

.clearfix{
    zoom: 1;/*zoom：1 触发IE hasLayout。*/
    &::after{
      content: " 111";
      display: block;
      clear: both;
      font-size: 0;
      height: 0;
      visibility: hidden;
    }
}

The after pseudo-element will add an element at the end of the content, generate content as the last element through content: "XXX", and then set clear to the pseudo-element to clear the float to make the parent element frame open, and set the pseudo-element to open the block-level content The remaining space, while using visibility to hide the added content.

Two, bfc principle

You can also clear the float by adding overflow: hidden to the parent element

Using this method triggers bfc, what is bfc?

BFC (Block Formatting Context) block-level formatting context is a concept of CSS layout. It is an independent rendering area, the elements inside will not affect the elements outside, and the elements outside will not affect the elements inside. HTML tags are the largest bfc area.

BFC principle (layout rules)

• The inner boxes will be placed vertically, one after the other starting from the top
• The vertical distance of the box is determined by the margin, and the margins of two adjacent boxes belonging to the same bfc will overlap
• The left margin of each element touches the left border of the containing block (from left to right), even for floated elements
• The BFC area will not overlap with the float element area ( clear float )
• When calculating the height of BFC, floating child elements also participate in the calculation

 The way to trigger BFC

1.  root element, HTML
2. float, the value of float is not none
3. The value of absolute positioning element position is absolute or fixed
4. The inline block display is inline-block
5. The display of the table unit is table, table-cell, table-caption, etc.
6. The flex box display is flex, inline-flex
7. The value of overflow is not visible

 The usage scenario of bfc

1. clear float
2. Adaptive two-column layout
3. Remove margin overlap phenomenon, when they belong to different bfc, margin overlap can be avoided

 The reason why it is not recommended to use overflow to clear floats is that it is very likely that the overflowing elements will be hidden, or scroll bars will appear, which will affect the appearance.