css之clearfix的用法深入理解(必看篇)


Posted in HTML / CSS onMay 21, 2023

如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开。看下面的例子:

Div布局如下:

css之clearfix的用法深入理解(必看篇)

Css代码如下:

.out{border:1px solid #F00; width:500px;}   
.inner1{width:200px; height:200px; float:left; border:1px solid #00F;}   
.inner2{width:200px; height:200px; float:left; border:1px solid #0F0;}

IE和FF显示如下图:

css之clearfix的用法深入理解(必看篇)

传统的人解决方法:

css之clearfix的用法深入理解(必看篇)

但是,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,最好使用下面clearfix方法。外层div加上clearfix样式。

clearfix定义如下:

.clearfix:after{visibility:hidden;display:block;font-size:0;content: " ";clear:both;height:0;}   
.clearfix{*zoom:1;}

css之clearfix的用法深入理解(必看篇)

这样修改以后显示正常。

那段代码是用来清除浮动的。

以下代码可以这么解释:

.clearfix:after {       <----在类名为“clearfix”的元素内最后面加入内容;   
    content: ".";     <----内容为“.”就是一个英文的句号而已。也可以不写。   
    display: block;   <----加入的这个元素转换为块级元素。   
    clear: both;     <----清除左右两边浮动。   
    visibility: hidden;      <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间,只是看不到而已;   
    height: 0;     <----高度为0;   
    font-size:0;    <----字体大小为0;   
}

整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果。(这个css的原理是经过使用 after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素 (display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.)

之所以用它,是因为,你不必在html文件中写入大量无意义的空标签,又能清除浮动。

.clearfix { *zoom:1;}   <----这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。

以上这篇css之clearfix的用法深入理解(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

 
HTML / CSS 相关文章推荐
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 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
html,css,javascript是怎样变成页面的
May 07 #HTML / CSS
You might like
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
深入理解js中this的用法
2016/05/28 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
Node.js简单入门前传
2017/08/21 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
学前班教师的自我鉴定
2013/12/05 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
生日派对邀请函
2014/01/13 职场文书
五年级科学教学反思
2014/02/05 职场文书
学校文明单位申报材料
2014/05/06 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
村委会贫困证明范本
2014/09/17 职场文书
给上级领导的感谢信
2015/01/22 职场文书
2015年暑假工作总结
2015/07/13 职场文书
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL