Css to clear floating classic instance code

1. Clear floating with empty tags
<Style type = "text/css">
<! -
* {Margin: 0; padding: 0 ;}
Body {font: 36px bold; color: # f00; text-align: center ;}
# Layout {background: # ff9 ;}
# Left {float: left; width: 20%; height: 200px; background: # ddd; line-height: 200px ;}
# Right {float: right; width: 30%; height: 80px; background: # ddd; line-height: 80px ;}
. Clr {clear: both ;}
->
</Style>
<Div id = "layout">
<Div id = "left"> left </div>
<Div id = "right"> right </div>
<P class = "clr">
</Div>

An empty tag can be a div tag or a p tag. I am used to using <p>, which is short enough, and many people use

Use overflow attributes
It effectively solves the drawbacks of clearing the floating through the empty label element and has to add unintentional code. To use this method, you only need to define the css attribute overflow: auto in the element to be cleared !" Zoom: 1 & prime; compatible with ie6.

<Style type = "text/css">
<! -
* {Margin: 0; padding: 0 ;}
Body {font: 36px bold; color: # f00; text-align: center ;}
# Layout {background: # ff9; overflow: auto; zoom: 1 ;}
# Left {float: left; width: 20%; height: 200px; background: # ddd; line-height: 200px ;}
# Right {float: right; width: 30%; height: 80px; background: # ddd; line-height: 80px ;}
->
</Style>
<Div id = "layout">
<Div id = "left"> left </div>
<Div id = "right"> right </div>
</Div>