CSS for float return text stream practice

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>