CSS parent element height is 0 solution

In CSS, the height of the parent element is generally stretched by the child element, and the height is not specially set, but the following conditions will cause the height of the parent element to collapse, that is, the height is zero, which affects the layout of the following elements.

1. Use absolute positioning for child elements

2. child element float

For the first case, where absolute positioning is used for child elements, the following scheme can be used:

• Change the absolute positioning of child elements to relative positioning , if possible

For the second case, that is, the collapse of the parent element caused by the floating of the child element, the following scheme can be used:

1. /* absolute positioning of the parent element */

   position: absolute

2. /* add parent element */

   overflow: hidden;

3. /* Pseudo element clears the effect of floating */

   .clearfix::before,.clearfix::after {
               content: "";
               display: block;
               height: 0px;
               line-height: 0px;
               clear: both;
               visibility: hidden;
           }

   /*Clear sibling elements, add empty elements to add styles*/

   <div class="dad">
       <div class="son"></div>
       <div style="clear: both"></div>
   </div>