CSS Tutorial: div Set height does not automatically increase after float

Originally wanted to change this topic to "closed floating element" or "clear floating element", but think about it, or not modified as well. Because from this topic we can see more easily, if you do not close (clear) floating element, it will cause the result is-----div height cannot automatically increase.
Anyway
Currently used to clear the "closed (clear) floating" method, mainly four kinds:
1. Additional Labeling method
This approach is to insert an extra label at the end of the parent container and make it clear floating (clear) to support the parent container. This approach is good for browser compatibility, there is no problem, the disadvantage is the need for additional (and often non-semantic) tags.
I personally do not like this method, but it is really a recommended method.
<div style= "Clear:both;" ></div>
or use <br style= "clear:both;"/>
2. Using the after pseudo-class
This approach is to add new content to the parent container using after pseudo-class and content declarations at the end of the specified current content. A common practice is to add a "point" because it is less noticeable. We then use it to clear the floating (closed floating element) and hide the content.
This method is generally compatible, but after a variety of hack can also deal 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 to hidden or auto
This is done by setting the overflow of the parent container 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 on multiple browsers
4. Floating external elements, float-in-float
This is done by letting the parent container float, which takes advantage of a feature of the floating element-the floating element closes the floating element. This approach has a good effect in both Ie/win and standard-compatible browsers, but the disadvantage is obvious-the parent container may not want to float, after all, the float is a more special behavior, and sometimes the layout does not allow it to float is also very normal.
The individual is not very much in favour of this approach, but from the final summary of Dudo, it seems that he is quite in favor of this approach

CSS Tutorial: div Set height does not automatically increase after float