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的新特性
Sep 05 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
用Simple Excel导出xls实现方法
2012/12/06 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Javascript 实现图片无缝滚动
2014/12/19 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
Python测试模块doctest使用解析
2019/08/10 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
美国轮胎网站:Priority Tire
2018/11/28 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
教师的实习自我鉴定
2013/12/17 职场文书
普通话演讲稿
2014/09/03 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
先进个人推荐材料
2014/12/29 职场文书
2015年司机工作总结
2015/04/23 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
2016新年问候语大全
2015/11/11 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
docker 制作mysql镜像并自动安装
2022/05/20 Servers