用:after清除浮动
来源:互联网 发布:pptv电视直播软件 编辑:程序博客网 时间:2024/06/14 06:38
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容;
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的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。
整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果。
之所以用它,是因为,你不必在html文件中写入大量无意义的空标签,又能清除浮动。
话说回来,你这段代码真是个累赘啊,这样写不利于维护。
只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了。
如:
<div class="clearfix"></div>
0 0
- 用:after清除浮动
- 用after伪类清除浮动
- clearfix:after 清除css浮动
- clearfix:after 清除css浮动
- clearfix:after 清除css浮动
- 牧佑oneZeroZeroDayDream--after清除浮动
- 伪元素:after清除浮动
- 清除DIV浮动-使用:after
- CSS 之 清除浮动.clearFix:after
- :after伪类+content内容清除浮动
- clearfix清除浮动闭合容器之:after与:before
- 使用伪元素(:after)清除浮动元素
- 清除浮动的三种方法(::after/.clear/overflow)
- 伪类:after清除浮动的原理和方法
- clearfix清除浮动闭合容器之:after与:before
- :after伪类+content 清除浮动的影响实例页面
- css用clearfix清除浮动
- 用clearfix:after消除 css浮动
- jquery 通过name名称获取当前name的value值
- Struts2 输入校验
- Codeforces Round #217前三题
- 简单的get http packet
- 生活杂谈
- 用:after清除浮动
- android下usb框架系列文章---(7)android-kernel gadget框架.doc
- HBase学习笔记(一)
- android 模拟屏幕点击
- 不同操作系统获取文件路径分隔符
- 职业上:冲动+坚持==》收获
- 鸽巢原理
- storm配置:设置worker进程内存大小
- [Android]高低API版本兼容之@TargetApi