Erlo

css公共库——清除浮动

时间:2019-03-15 15:02   阅读:51次   来源:博客园页面报错

点赞 打赏

×打赏

支付宝

微信

清除浮动是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,不过现在应该没人用这两个浏览器了。

下一篇:vue的组件化运用(数据在两个组件互传,小问题总结)

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-05-22 16:04:02Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 首页 笔记分享 案例展示 ERLO 搜索
    鼠标试试
    返回顶部