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实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 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/05/27 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python实现二叉树的遍历
2017/12/11 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
小学教师师德师风演讲稿
2014/08/22 职场文书
房屋过户委托书范本
2014/10/07 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL