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 相关文章推荐
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 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中对2个数组相加的函数
2011/06/24 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
PHP面向对象法则
2012/02/23 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
浅谈javascript中自定义模版
2015/01/29 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
Vue组件实现触底判断
2019/06/26 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python基于递归解决背包问题详解
2019/07/03 Python
Python将string转换到float的实例方法
2019/07/29 Python
如何表示python中的相对路径
2020/07/08 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
蛋白质世界:Protein World
2017/11/23 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
应届护士推荐信
2013/11/16 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
标准化管理实施方案
2014/02/25 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
六年级作文之关于梦
2019/10/22 职场文书