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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
web前端之css水平居中代码解析
May 20 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检测文件编码的方法示例
2014/04/25 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Python多线程原理与用法详解
2018/08/20 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
iostream与iostream.h的区别
2015/01/16 面试题
优秀毕业生求职信
2014/06/05 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
工作经历证明书范文
2014/11/02 职场文书
复试通知单模板
2015/04/24 职场文书
小王子读书笔记
2015/06/29 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技