黑马程序员技术交流社区

标题: 【上海校区】css公共库——清除浮动 [打印本页]

---

作者: 不二晨    时间: 2019-3-15 14:43
标题: 【上海校区】css公共库——清除浮动

[size=13.3333px]清除浮动是css的基础，但有时候会忘了一些最简单的东西

[size=13.3333px]浮动因为在文档流之外，所以会造成父元素的坍塌。父元素之后的元素排版就会乱。

[size=13.3333px]常用的方法是在浮动父元素中添加cf类，然后定义cf样式，并将其放在公共库内。

[url=][/url]
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 -->[url=][/url]

[size=13.3333px]因为clear 属性定义了元素的哪边上不允许出现浮动元素，

[size=13.3333px]这里是两边都清除了，

[size=13.3333px]所以通过after插入的元素就在img（浮动）下面，不会从父元素.box的顶部开始布局，

[size=13.3333px]从而也就撑起了.box。

[size=13.3333px]zoom是为了满足IE6/7，不过现在应该没人用这两个浏览器了。

---

作者: 不二晨    时间: 2019-3-20 17:23
奈斯，感谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2