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 18 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 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的dl函数用法实例
2014/11/06 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP实现微信提现功能
2018/09/30 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
js实现内置计时器
2019/12/16 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python实现简单状态框架的方法
2015/03/19 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
python实现定时提取实时日志程序
2018/06/22 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
安全生产先进个人事迹材料
2014/12/30 职场文书
大学生在校表现评语
2014/12/31 职场文书
员工加薪申请报告
2015/05/15 职场文书