CSS parent Element height is 0 solution

The height of the parent element in the CSS is generally stretched by the child element and does not deliberately set the height, but the following conditions cause the parent element to collapse highly, that is, the height is zero, affecting the composition of the subsequent elements.

1. Child elements using absolute positioning

2. child element Floating

For the first case, where the child element uses absolute positioning, the following scenarios can be used:

• The absolute positioning of the child element is changed to relative positioning , if it can be changed

For the second case, where the parent element collapses due to a child element float, the following scenarios can be used:

2. /* Parent Element absolute Positioning */

   Position:absolute

4. /* Parent Element Add */

   Overflow:hidden;

6. /* pseudo element clear floating effect */

   {            content: "";             Display: block;             height: 0px;             line-height: 0px;             Clear: both;             Visibility: hidden;        }

   /* Clear sibling element, add empty element add style */

   <div class= "Dad" >    <div class= "son" ></div>    <div style= "Clear:both" ></div> </div>

CSS parent Element height is 0 solution