css中清除浮動的例子

左圖右文形式，這是手機頁面經常碰到的一種情況，記得第一次寫的時候，好糾結，因為不會，排版的時候，老是寫不出和效果圖一樣的效果，最近發現，原來是使用了float元素，導致這個頁面最外層的標籤撐不起來（手機頁面一般不將寬度和高度定死），這個時候，突然想起可以清除浮動  clear:both;

下面放出代碼

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%;padding-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">
 <img src="images/product_pic2.png" alt="">
 <p class="cell-title ellipsis">浙江衢州橘子浙江衢州橘子浙江衢州橘子浙江衢州橘子浙江衢州橘子</p>
 <div class="cell-content-del more-ellipsis">浙江味美味美味美味美味美味美味美味美味美味美味美味美味美味美味味美味美味州橘子</div>
 <p class="clh"></p>
 </a>
在使用float的標籤下方，添加一個標籤，清除之前浮動的影響（最外層標標籤無法撐開）