您的位置：首页 > 网站优化 > css  >  css中清除浮动的例子

css中清除浮动的例子

 更新时间：2017年1月22日 11:03  点击：1491
清除浮动可以保持我们样式的兼容性了这里我们来看一篇关于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的标签下方，添加一个标签，清除之前浮动的影响（最外层标标签无法撑开）

[!--infotagslink--]

相关文章

  • @CacheEvict 清除多个key的实现方式

    这篇文章主要介绍了@CacheEvict 清除多个key的实现方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-13

  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02

  • Linux下PHP安装curl扩展支持https例子

    安装curl扩展支持https是非常的重要现在许多的网站都使用了https了，下面我们来看一篇关于PHP安装curl扩展支持https例子吧。 问题： 线上运行的lamp服务器，默认yu...2016-11-25

  • IDEA中的clean,清除项目缓存图文教程

    这篇文章主要介绍了IDEA中的clean,清除项目缓存图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25

  • jquery ready函数、css函数及text()使用示例

    .text更改内容 .css更改样式...2013-10-03

  • js+css实现回到顶部按钮（back to top）

    这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03

  • React引入antd-mobile+postcss搭建移动端

    本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧...2021-06-21

  • 解决vue scoped scss 无效的问题

    这篇文章主要介绍了解决vue scoped scss 无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-04

  • php使用floor去掉小数点的例子

    floor会产生小数了如果我们不希望有小数我们是可以去除小数点的了，下面一聚教程小编来为各位介绍php使用floor去掉小数点的例子，希望对各位有帮助。 float floor (...2016-11-25

  • Vue如何优雅的清除定时器

    定时器如果不及时合理地清除，会造成业务逻辑混乱甚至应用卡死的情况，这个时就需要清除定时器，本文就介绍了Vue如何优雅的清除定时器，感兴趣的可以了解一下...2021-07-22

  • BootStrap CSS全局样式和表格样式源码解析

    这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23

  • XML、HTML、CSS与JS的区别整理

    在BS中，xml，html，css和js我们都学过，起初分不清这四者的区别和联系，随着知识的增长，有了一些体会，下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别，需要的朋友参考下...2016-02-21

  • 详解微信小程序 通过控制CSS实现view隐藏与显示

    这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27

  • 在JS中如何使用css变量详解

    这篇文章主要给大家介绍了关于如何在JS中如何使用css变量以及export之javascript关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2021-09-02

  • JavaScript驾驭网页-CSS与DOM

    DOM是种符合万维网标准的HTML操纵方式，它能比innerHTML特性达成更多操控功能。这篇文章主要介绍了JavaScript驾驭网页-CSS与DOM的相关资料,需要的朋友可以参考下...2016-03-28

  • js+css简单实现网页换肤效果

    这篇文章主要介绍了js+css简单实现网页换肤效果的方法,涉及JavaScript响应鼠标事件动态遍历及修改页面元素样式的相关技巧,需要的朋友可以参考下...2016-01-02

  • Webpack打包css后z-index被重新计算的解决方法

    这篇文章主要跟大家分享了Webpack打包css后z-index被重新计算的解决方法，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。...2017-06-24

  • JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    这篇文章主要介绍了JS+CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下...2016-03-28

  • 一步步教大家编写酷炫的导航栏js+css实现

    一步步教大家编写酷炫的导航栏，js+css实现黑色经典导航栏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-03-18

  • jquery结合css实现返回顶部功能

    在本篇文章里小编给大家整理了一篇关于jquery结合css实现返回顶部功能的相关文章，有兴趣的朋友们可以实例测试下。...2021-08-02