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中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 HTML / CSS
HTML5之高度塌陷问题的解决
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
上海无线电三厂简史修改版
2021/03/01 无线电
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
对联广告js flash激活
2006/10/19 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
numpy排序与集合运算用法示例
2017/12/15 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
python发送告警邮件脚本
2018/09/17 Python
Python初学者常见错误详解
2019/07/02 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
python实现连连看游戏
2020/02/14 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
法人授权委托书格式
2014/04/08 职场文书
保护动物倡议书
2014/04/15 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
校长师德表现自我评价
2015/03/05 职场文书
中标通知书
2015/04/17 职场文书
毕业实习感受与体会
2015/05/26 职场文书
课改心得体会范文
2016/01/25 职场文书