CSS layout skills: Closure of parent container after child element floating

Source: Internet
Author: User
In the last two months, I have made several website Artists Intermittently and gained a better understanding of standard development of Div + CSS. There are two biggest gains: one is to thoroughly understand the Box Model of CSS, and the other is to solve the "Closed floating element" problem that has plagued me for a long time:
Generally, if a child element uses float, the parent element cannot know exactly where the child element ends, therefore, the bottom border of the parent element always passes through the middle or even the top of the child element, which looks uncomfortable.
At the earliest stage, I added a sub-element <br/> or <div> </div> to set its attribute to "clear: all ;", in this way, many useless empty tags need to be generated, and some websites even need to modify ASP CodeTo automatically add these empty tags, this is the best strategy.
Later I found that when the parent label is set to float, it can be closed in the correct position, so it is easy to float the parent, in this way, a lot of ASP code does not need to be changed. If you need to add an empty label containing the clear attribute, if you cannot add it from the template, but need to add it from the ASP code, you don't need to change the ASP code. You just need to set the parent container as floating. If you still need to change ASP, then set the parent container of the parent container as floating, floating up layer by layer, always solve the problem. Although this can save a lot of trouble, it is easy to make the whole page contain floating elements ,-_-!!! It can only be regarded as a medium strategy.
Later, when searching for other things on the Internet, it was said that the following two attributes can be added to the CSS attribute of the parent container:

Example source code [Www.52css.com]Overflow: auto;
_ Height: 1%;

After trying it out, it is really easy to use. In this way, it should be regarded as the best strategy to solve this problem: You do not need to modify the page tasks, basically, you do not need to modify the parent container-or even the parent container of the parent container. You just need to add two indifferent attributes to the parent container.

Related Article

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.