清除浮动 .clearfix
2015-08-27 15:01
363 查看
什么是.clearfix
CSS 代码 复制
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
<div class="clearfix">
<div class="floated"></div>
</div>
上述代码说明:
CSS 代码 复制
.clearfix:after {
content: "."; /*内容为“.”就是一个英文的句号而已。也可以不写。*/
display: block; /*加入的这个元素转换为块级元素。*/
clear: both; /*清除左右两边浮动。*/
visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;*/
line-height: 0; /*行高为0;*/
height: 0; /*高度为0;*/
font-size:0; /*字体大小为0;*/
}
.clearfix { *zoom:1;} /*这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/
上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:
1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。
2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。
3、在需要清除浮动的时候,只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了。
实例:
HTML 代码 复制
<html >
<head>
<title> css用clearfix清除浮动实例</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<style type="text/css">
/*所有主流浏览器都支持 :after 伪元素。*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}/*不知道有什么用处,不加ie7也没有问题*/
.box{ background:#111;width:500px; position:relative;}
.l{float:left; background:#333;width:200px; height:100px;}
.r{float:right;background:#666;width:200px; height:200px;}
.s{width:100px; height:100px;background:#999;position:absolute;right:-50px;;}
</style>
<div class="box clearfix">
<div class="l">left</div>
<div class="r">right</div>
<div class="s">absolute</div>
</div>
</body>
</html>
原内容来自: http://www.studyofnet.com/news/196.html
CSS 代码 复制
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
<div class="clearfix">
<div class="floated"></div>
</div>
上述代码说明:
CSS 代码 复制
.clearfix:after {
content: "."; /*内容为“.”就是一个英文的句号而已。也可以不写。*/
display: block; /*加入的这个元素转换为块级元素。*/
clear: both; /*清除左右两边浮动。*/
visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;*/
line-height: 0; /*行高为0;*/
height: 0; /*高度为0;*/
font-size:0; /*字体大小为0;*/
}
.clearfix { *zoom:1;} /*这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/
上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:
1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。
2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。
3、在需要清除浮动的时候,只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了。
实例:
HTML 代码 复制
<html >
<head>
<title> css用clearfix清除浮动实例</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<style type="text/css">
/*所有主流浏览器都支持 :after 伪元素。*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}/*不知道有什么用处,不加ie7也没有问题*/
.box{ background:#111;width:500px; position:relative;}
.l{float:left; background:#333;width:200px; height:100px;}
.r{float:right;background:#666;width:200px; height:200px;}
.s{width:100px; height:100px;background:#999;position:absolute;right:-50px;;}
</style>
<div class="box clearfix">
<div class="l">left</div>
<div class="r">right</div>
<div class="s">absolute</div>
</div>
</body>
</html>
原内容来自: http://www.studyofnet.com/news/196.html
相关文章推荐
- Linux系统——访问U-BOOT环境变量
- 局域网-断网&劫持(kali)
- KMP算法
- 一键源码安装Ansible
- 机器学习/数据挖掘工程师校招笔试题目总结。
- android设置Activity背景色为透明的2种方法
- spring ioc 依赖注入
- 重识Xcode 7 Beta 6中的Print功能
- android窗体动画:activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失,并解决activity跳转的时候出现短暂的黑屏
- div拖拽时取消文字选中默认事件的解决方法
- hdu4644 BWT(KMP)
- SQL truncate 、delete与drop区别
- Unity Android交互过坑指南
- 常见算法笔试题的研究1(自定义排序规则的整数排序)
- [150827]Groovy 之正则表达式
- Dubbo-Admin管理平台和Zookeeper注册中心的搭建
- 这是第一篇文章
- oracle触发器
- DedeCMS后台,页面无显示 ,后台页面空白【转】
- Python 面向对象编程(一)