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:

javascript:;" class="cell-content">
 
 

浙江衢州橘子浙江衢州橘子浙江衢州橘子浙江衢州橘子浙江衢州橘子