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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
相对路径转化成绝对路径
2007/04/10 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
python 字符串和整数的转换方法
2018/06/25 Python
python简单贪吃蛇开发
2019/01/28 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
Django的CVB实例详解
2020/02/10 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
班长岗位职责
2013/11/10 职场文书
大学军训感想
2014/02/12 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
银行给客户的感谢信
2015/01/23 职场文书
乌镇导游词
2015/02/02 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
调研报告的主要写法
2019/04/18 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
Java8中Stream的一些神操作
2021/11/02 Java/Android