[Web front-end] The parent div cannot adapt to the height after the CSS child div is set to float_html/css_WEB-ITnose

Note: Reprinted from zctya's blog

In layouts using CSS DIV, it is often found that when a DIV floats, if its When the height exceeds the height of its parent DIV, the height of its parent DIV will not be adjusted accordingly. To solve this problem (also called closing (clearing) the float), we have four methods:

1. Extra tag method

This method is to insert an extra tag at the end of the parent container label and clear it to expand the parent container. This method has good browser compatibility and no problems. The disadvantage is that it requires additional (and usually semantically unsemantic) tags. I personally prefer this method because it is simple, practical, and has good browser compatibility, and this method is also recommended by W3C

<div style="clear:both;"></div>

or use

<br style="clear:both;"/>

2. Use after pseudo-class

This method is to use after pseudo-class and content declaration for the parent container and add it at the end of the specified current content New content. A common approach is to add a "dot" because it is smaller and less noticeable. Then we use it to clear the float (close the floated element) and hide the content. This method has general compatibility, but it can handle different browsers through various hacks, and at the same time, it can ensure that the html is relatively clean.

#outer:after{   content:".";   height:0;   visibility:hidden;   display:block;   clear:both;}

3. Set the overflow to hidden or auto

This method is to set the overflow of the parent container to hidden or autot, and it can be used in standard-compliant browsers A closed floating element. However, when using overflow, it may have an impact on page performance, and this impact is uncertain. It is best to test your page on multiple browsers.

#outer{   overflow:auto;   zoom:1;}

overflow:auto; makes the height adaptive, zoom:1; is for compatibility with IE6, and can also be solved with height:1%;.

4. Float external elements, float-in-float

This approach is to make the parent container float, which takes advantage of a characteristic of floating elements? Floating elements will close floating elements. This method has good results in IE/Win and standard-compatible browsers, but the shortcomings are also obvious. The parent container may not float just because it wants to float. After all, floating is a special behavior, and sometimes the layout is not correct. Allowing it to float is also normal.