High collapse, overflow: hidden

High collapse, overflow: hidden

1. Concept
The height of the parent element in the Document Stream is supported by the quilt element by default. When the child element is out of the Document Stream, the height of the parent element cannot be lifted, which will cause the height of the parent element to collapse.
Once the height of the parent element is collapsed, the positions of all elements will be moved up, leading to chaotic layout of the entire page.

 

2. method 1

Add a blank div at the end of the collapsed parent element, and then clear the floating div.

<Div class = "box1"> <div class = "box2"> </div> <div>. clearfix: after {content: ""; display: block; clear: both ;}. clearfix {zoom: 1 ;}

This method works the same way as method 2, but you do not need to add the structure to the page.

Zoom: 1 is compatible with ie6 only. after is a pseudo class in css. ie6 and earlier versions are not compatible. This method can be said to be the best method to combine, without affecting any other style, strong versatility, wide coverage.