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实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
CSS的class与id常用的命名规则
May 18 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
php2html php生成静态页函数
2008/12/08 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
PHP实现文件下载详解
2014/11/27 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
python通过cython加密代码
2020/12/11 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
数据库面试要点基本概念
2013/10/31 面试题
求职简历自荐信范文
2013/10/21 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
网络研修随笔感言
2014/02/17 职场文书
个人更名证明
2015/06/23 职场文书
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript