CSS Tutorial: div Set float height does not automatically increase

The topic was intended to be modified as "closed floating element" or "clear floating element", but if you think about it, it's better not to change it. Because from this topic we can easily see that if you do not close (clear) floating elements, it will be the result of the-----div height can not automatically increase.

Anyway
Currently used to clear the "closed (clear) floating" method, mainly four:

1. Additional Labeling method

This method is to insert an extra label at the end of the parent container and make it clear the float to support the parent container. This approach is good for browser compatibility, there is no problem, the disadvantage is that the need for additional (and usually no semantic) tags.
I personally do not like this method, but it is indeed the recommended method of the Consortium

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

or use

<BR style= "Clear:both"/>

2. Use after pseudo class

This approach is to add new content to the parent container using the after pseudo class and content declaration at the end of the specified current content. It is often done by adding a "dot" because it is less noticeable. Then we use it to clear the float (closed floating element) and hide this content.
This method of compatibility, but through a variety of hack can also cope with different browsers, but also to ensure that the HTML is relatively clean, so use is still more.

#outer: after{
Content: ".";
height:0;
Visibility:hidden;
Display:block;
Clear:both;
}

3. Set overflow as hidden or auto

The practice is to set the parent container's overflow to hidden or auot to close the floating element in a standard-compatible browser.
However, when using overflow, it may affect the performance of the page, and this effect is uncertain, you'd better be able to test your page in multiple browsers

4. Floating external elements, float-in-float

This approach is to allow the parent container to also float, which leverages an attribute of the floating element-the floating element closes the floating element. This way in Ie/win and standard-compatible browsers have a good effect, but the disadvantage is also obvious--the parent container may not want to float on the float, after all, floating is a special behavior, sometimes the layout does not allow its floating is also very normal.
The individual is not very much in favor of this practice, but from the Dudo final summary can always see that he seems to agree with this approach