How to solve the problem that the CSS sub-div cannot adapt to the height of the parent div after setting float

In the CSS + DIV layout, it is often found that after a DIVfloat, if its height exceeds the height of its parent DIV, the height of the parent DIV is not adjusted accordingly. There are four solutions to solve this problem (also called closed (clear) floating. 1. Additional labeling

This method inserts an additional label at the end of the parent container and clears the floating (clear) to support the parent container. In this way, the browser has good compatibility and there is no problem. The disadvantage is that additional (and usually non-semantic) labels are required. I personally like this method because it is simple, practical, and compatible with browsers. This method is also recommended by W3C.

Or use

2. Use the after pseudo-class

This method adds new content at the end of the specified current content using the after pseudo class and content Declaration for the parent container. It is often used to add a "point" because it is relatively small and not very noticeable. Then we use it to clear the floating (closed floating element) and hide the content. This method is generally compatible, but it can handle different browsers through various hack methods, while ensuring that html is relatively clean.

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

3. Set overflow to Den den or auto

In this way, you can set overflow of the parent container to Den den or auot to close floating elements in a standard compatible browser. However, when using overflow, it may affect the page performance, and the impact is uncertain. You 'd better test your page on multiple browsers.

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

Overflow: auto; is to make the height adaptive, zoom: 1; is to be compatible with IE6, you can also use the height: 1%; method to solve.


4. Floating external element, float-in-float

This approach allows the parent container to also float, which utilizes a feature of floating elements-floating elements close floating elements. This method works well in both IE/Win and standard compatible browsers, but its disadvantages are also obvious-the parent container may not be floating if it wants to float, after all, floating is a special behavior, and sometimes it is normal that the layout does not allow its floating.