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的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 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
用PHP4访问Oracle815
2006/10/09 PHP
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP curl使用实例
2015/07/02 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python3 Random模块代码详解
2017/12/04 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
安全生产大检查方案
2014/05/07 职场文书
公司任命书模板
2014/06/06 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
创业计划书之书店
2019/09/10 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python