css公共库——清除浮动
清除浮动是css的基础,但有时候会忘了一些最简单的东西
浮动因为在文档流之外,所以会造成父元素的坍塌。父元素之后的元素排版就会乱。
常用的方法是在浮动父元素中添加cf类,然后定义cf样式,并将其放在公共库内。
1 .box.cf 2 img.fl 3 img.fr 4 <!-- 以上是jade格式 --> 5 6 .cf:after{ 7 display:table; 8 content:""; 9 clear:both; 10 } 11 12 .cf{*zoom:1;} 13 <!-- 以上为对应css -->
因为clear 属性定义了元素的哪边上不允许出现浮动元素,
这里是两边都清除了,
所以通过after插入的元素就在img(浮动)下面,不会从父元素.box的顶部开始布局,
从而也就撑起了.box。
zoom是为了满足IE6/7,不过现在应该没人用这两个浏览器了。