clear 万能清除浮动(clearfix:after)


Posted in HTML / CSS onMay 21, 2023

一般情况下:

html body div.clear,
html body span.clear
{
     background: none;
     border: 0;
     clear: both;
     display: block;
     float: none;
     font-size: 0;
     margin: 0;
     padding: 0;
     overflow: hidden;
     visibility: hidden;
     width: 0;
     height: 0;
}

使用方法:通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。

clear的定义当前比较热门的定义

.clear{clear: both;overflow: hidden;line-height: 0;height: 0;zoom:1}

还有一种是

.clearfix:before,	
.clearfix:after {content: ".";display: block;height: 0;overflow: hidden;visibility: hidden;}
.clearfix:after{clear: both}

这个是优化版的清除浮动的样式,页面中不需要加任何东西,很值得推荐。

 

 
HTML / CSS 相关文章推荐
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 #HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 #HTML / CSS
HTML中link标签属性的具体用法
May 07 #HTML / CSS
css弧边选项卡的项目实践
May 07 #HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 #HTML / CSS
CSS实现鼠标悬浮动画特效
CSS link与@import的区别和用法解析
May 07 #HTML / CSS
You might like
php桌面中心(一) 创建数据库
2007/03/11 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
利用Python演示数型数据结构的教程
2015/04/03 Python
python追加元素到列表的方法
2015/07/28 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
行政前台岗位职责
2013/12/04 职场文书
八一慰问活动方案
2014/02/07 职场文书
小摄影师教学反思
2014/04/27 职场文书
医院保洁服务方案
2014/06/11 职场文书
竞赛口号大全
2014/06/16 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
爱国主题班会教案
2015/08/14 职场文书