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 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 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正则
2006/07/07 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
pandas-resample按时间聚合实例
2019/12/27 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
python怎么删除缓存文件
2020/07/19 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
委托代理人授权委托书范本
2014/09/24 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
幼师个人总结范文
2015/02/28 职场文书
安全承诺书格式范本
2015/04/28 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
史上最牛辞职信
2015/05/13 职场文书
焦裕禄观后感
2015/06/03 职场文书
礼仪培训心得体会
2016/01/22 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL