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的属性transition制作菜单导航效果
Sep 01 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 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 进度条实现代码
2009/03/10 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
Python编程中time模块的一些关键用法解析
2016/01/19 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
Python类装饰器实现方法详解
2018/12/21 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python for和else语句趣谈
2019/07/02 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python实现桌面气泡提示功能
2019/07/29 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
基于python 凸包问题的解决
2020/04/16 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
python 写一个文件分发小程序
2020/12/05 Python
霸气押韵的班级口号
2014/06/09 职场文书
应届生找工作求职信
2014/06/24 职场文书
保密工作目标责任书
2014/07/28 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android