Examples of clearing floating in CSS

The right text form of the left, this is a mobile phone page often encountered a situation, remember the first time to write, good entanglements, because not, when typesetting, always cannot write and the effect of the same effect, recently found that the original is the use of float elements, Causes this page the outermost label cannot hold up (the handset page generally does not have the width and the height to die), this time, suddenly thought can clear floating clear:both;

Release the code below

Css:

. cell-content {display:block;margin-bottom:10px;background: #eee;}
. cell-content:hover,.cell-footer ul li a:hover {color:red}
. cell-content img {width:20%;float:left;padding:3% 3% 0 3%;}
. cell-title {width:71%;p adding-top:4%;font-size:16px;cursor:pointer;}
. ellipsis {Overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
. more-ellipsis {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
. cell-content-del {float:right; Margin-right:3%;width:71%;margin-top:2%;font-size:14px;color: #333; Line-height: 1.5;}
. CLH {Padding-bottom:3%;clear:both}

Html:

<a href= "javascript:;" class= "Cell-content"
 
 <p class= "cell-title ellipsis" > Zhejiang quzhou orange zhejiang quzhou orange zhejiang quzhou orange zhejiang quzhou orange zhejiang Quzhou orange </p>
 <div class= " Cell-content-del more-ellipsis "> Zhejiang cuisine Delicious delicious delicious delicious delicious delicious delicious delicious tasty delicious tasty delicious tasty delicious yummy taste tasty delicious yummy state orange </div>
 <p class=" CLH "></p>
 </a>
under the label using float, add a label that clears the effect of the previous float (the outermost label cannot be stretched)