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中Color的一些特性介绍
May 27 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
求职推荐信
2013/10/28 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
仓管岗位职责范本
2014/02/08 职场文书
四年级评语大全
2014/04/21 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
2015年财政所工作总结
2015/04/25 职场文书
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技