Solution to the height collapse of page layout

High collapse

When we are laying out the page, we often accidentally find that the layout is different from what you imagined. One big reason is that when you float elements, you have a common floating bug: height collapse is also called height collapse

Why does this bug occur? And how should we solve this bug

The reason for the height collapse: the parent element has no height set, and the child element contains float

Solutions for high collapse:

1. Add height to the parent element
   Advantages: simple solution
   Disadvantages: width and height can not be adaptive

2. Set overflow: hidden on the parent element that has a high collapse.
   Advantages: It can solve the height collapse and can be adaptive, easy to understand.
   Disadvantage: Boxes beyond the current parent element will be hidden

3. Add a label div to the last box, and set the style to solve the height collapse.
   Default style: clear: both clear both. So
   the principle of left/right clear floating: clear the space reserved for floating elements. In order to be assured of a floating element, clear the above preset Leave space, so it can solve the high collapse.
   Advantages: add a label where the high collapse occurs.
   Disadvantages: add boxes, some unnecessary layout structures and code redundancy

4. Universal Clear Method-It’s not easy to understand, just use it
   . Add the class name clear-fix
   clear-fix::after{ content:""; width:100%; height:0; display:block; clear:both; overflow:hidden; visibility:hidden; } Advantages: easy to clear Disadvantages: too much code, difficult to understand