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

Source: Internet
Author: User
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.