"CSS" div parent container adapts to sub-container size

The div is the parent container does not automatically adjust the height according to the content, we look at the following code:

1 <  ID= "main">  23<ID  = "Content"></div>  45 </ Div >  

When content is a long time, even if main is set to height 100% or auto. The automatic extension is still not intact under different browsers. The height of the content is relatively high, but the height of the container main is still not open.

There are three ways to solve this problem.

One, add a clear float, let the parent container know the height. Notice that there is a space in the container that clears the float.

1 <div id= "main" >  2 3 <div id= "content" ></div>  4 5 <div style= "font:0px/0px Sans-serif; Clear:both;display:block "> </div>  6 7 </div>   

Two, add a container that exists in the code but is not visible in the visual.

1 <DivID= "Main">  2 3 <DivID= "Content"></Div>  4 5 <Divstyle= "height:1px; margin-top:-1px;clear:both;overflow:hidden;"></Div>  6 7 </Div>   

Three, add a BR and set the style to Clear:both.

<id= "main">  <id= "Content"  ></div>  <style= " Clear:both; " />  </ Div >  

"CSS" div parent container adapts to sub-container size