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实现背景模糊的三种方式
Mar 09 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 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 日常开发小技巧
2009/09/23 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Java分治归并排序算法实例详解
2017/12/12 Python
python编写分类决策树的代码
2017/12/21 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python实现像awk一样分割字符串
2020/09/15 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2015年药店工作总结
2015/04/20 职场文书
婚宴新郎致辞
2015/07/28 职场文书
感恩的心主题班会
2015/08/12 职场文书
解决vue中provide inject的响应式监听
2022/04/19 Vue.js