Use after pseudo class to clear floating

Previously cleared floats are always added after the element that you want to clear floating

<div style= "Clear:both;" ></div>

or written in the BR tag to solve, but this will increase the non-semantic tags, the following pseudo-class implementation, compatible with a variety of browsers

. clearfix:after{    content: "";    Display:block;    height:0;    Clear:both;    Visibility:hidden;}

is compatible with IE6,IE7 because the IE6,IE7 cannot be used after pseudo class. Add the following code

. clearfix{zoom:1}

In general, if there is a float (float) inside the parent layer may cause the parent layer to have a height of 0, plus clearfix.

Html:

<p class= "Parent Clearfix" >     <p class= "left" >left</p>     <p class= "right" >right</p > </p>

Css:

. clearfix{zoom:1}    . clearfix:after{    content: "";    Display:block;    height:0;    Clear:both;    Visibility:hidden;}. parent{    background-color:red;    width:120px;}. left{    Float:left;    Background-color:pink;    height:60px;}. right{    float:right;    Background-color: #abcdef;}