After setting float for div (or other block-level elements), the height cannot be lifted.

The problem is:

HTML:

 1 
 
CSS:
 
 1 @charset "utf-8"; 2 /* CSS Document */ 3  4 #container{ 5     width: 960px; 6     height: auto; 7     margin: 0 auto; 8     background-color: #f00; 9     }10     11 .images {12     display: block;13     width: 230px;14     height: 230px;15     padding: 5px;16     float:left;17     }
 
The result of the above Code is:
 
 

 
The solution is:
Currently, the following methods are used to clear "close (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 don't like this method, but it is indeed recommended by W3C.
<Div style = "clear: Both;"> </div>
Or use
<Br style = "clear: Both;"/>
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 after a variety of hack can also cope with different browsers, while at the same time can ensure that HTML is relatively clean, so it is used more.
 

 

 
  
 
   
 
    
Reference content is as follows:
# 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.
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.
 
After setting float for div (or other block-level elements), the height cannot be lifted.