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绘制出各种几何图形
Aug 17 HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 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
Syphon 秘笈
2021/03/03 冲泡冲煮
php实现json编码的方法
2015/07/30 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python3实现多线程聊天室
2018/12/12 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
python实现canny边缘检测
2020/09/14 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书
园林技术专业求职信
2014/07/28 职场文书
社区活动策划方案
2014/08/21 职场文书
2014年招生工作总结
2014/11/26 职场文书
消防安全月活动总结
2015/05/08 职场文书
python关于集合的知识案例详解
2021/05/30 Python
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle