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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
CSS基础详解
Oct 16 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
Session保存到数据库的php类分享
2011/10/24 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Python实现excel转sqlite的方法
2017/07/17 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
python实现自动发送报警监控邮件
2018/06/21 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
基于python中theano库的线性回归
2018/08/31 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
python如何编写win程序
2020/06/08 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
印尼购物网站:iLOTTE
2019/10/16 全球购物
社区学习雷锋活动总结
2014/04/25 职场文书
中学生演讲稿
2014/04/26 职场文书
汽车专业求职信
2014/06/05 职场文书
企业标语大全
2014/07/01 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
质量月活动总结
2014/08/26 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python