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 相关文章推荐
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 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制作静态网站的模板框架(二)
2006/10/09 PHP
使用php实现截取指定长度
2013/08/06 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
深入浅析Python中的yield关键字
2018/01/24 Python
python得到单词模式的示例
2018/10/15 Python
Python可迭代对象操作示例
2019/05/07 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
毕业自我鉴定书
2014/03/24 职场文书
员工年终考核评语
2014/12/31 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记