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中的长度单位
Jun 27 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 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 CKEditor 上传图片实现代码
2009/11/06 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
python的concat等多种用法详解
2018/11/28 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
PyTorch实现AlexNet示例
2020/01/14 Python
python实现猜数游戏
2020/03/27 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Python通过len函数返回对象长度
2020/10/22 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
学校门卫岗位职责范本
2014/06/30 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
借条格式范本
2015/05/25 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电