How to clear float with css

The most common

The code is as follows:

Copy code

<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 ;} -> </Style> <Div id = "layout"> <Div id = "left"> Left </div> <Div id = "right"> Right </div> </Div>

Use div to operate

Clear floating with empty labels. I have been using this method for a long time. 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 Ps: <Br clear = "all"/>It can also achieve the effect, but it is not clear which one is better. Haha

The code is as follows:

Copy code

<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"> </p> </Div>

A common way to clear floating is to add an extra label and then add the clear: both setting to this label. People who want to be perfect are certainly not happy with this method, as described in this article, you can add a clearfix class to the elements to be purged without adding additional elements.

The code is as follows:	Copy code
<Style type = "text/css"> . Clearfix: after { Content :"."; Display: block; Height: 0; Clear: both; Visibility: hidden; }   . Clearfix {display: inline-block ;}   /* Hides from IE-mac */ * Html. clearfix {height: 1% ;} . Clearfix {display: block ;} /* End hide from IE-mac */   </Style>