The problem is often encountered in design:
When a float is inside the container, the height of the container is not stretched.
Here are two ways to solve the above problem
The first type: Add a clear:both to the floating element and a more common method.
<style type= "Text/css" >.left{float:left;}. Right{float:right;}. Clear{clear:both;} </style><div><div class= "left" ></div><div class= "right" ></div><div class= " Clear "></div></div>
Disadvantage: Compatibility is not strong, IE6 under the div.clear will have height, need to height:0,overflow:hidden to solve; the page has redundant code.
The second method: Clearfix; the most perfect solution.
. clearfix:after {content: "."; display:block;clear:both;visibility:hidden;line-height:0;height:0;} . clearfix {display:inline-block;} Html[xmlns]. clearfix {display:block;} * html. clearfix {height:1%;}
Or
. clearfix{zoom:1}.clearfix:before,.clearfix:after{content: ' \0020 '; Display:block; Overflow:hidden; Visibility:hidden; width:0; height:0}.clearfix:after{Clear:both}
To use: Add a Clearfix class to the floating container.
<div class= "Clearfix" > <div class= "left" > </div> <div class= ' right ' > </div></ Div>
Or
<div class= "Panel clearfix" > Content ... </div>