码迷,mamicode.com
首页 > 其他好文 > 详细

2020年如何清除浮动?还在使用老的方式?clearfix?

时间:2020-04-06 19:05:41      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:方式   Fix   splay   https   after   pre   http   添加   版本   

将 group 类添加到任何需要清除浮动的父级元素即可,这行代码兼容 IE8 及以上,目前国内不少大网站也在采取这种做法。

.group:after {
  content: "";
  display: table;
  clear: both;
}

提示: 现在2020年,除了IE8需要兼容以外,很少项目会去兼容 IE6 和 IE7了, 而上面这行代码兼容IE8及以上,所以是可行的。

如果你需要兼容 IE7 或者 IE6,可以使用下面的版本:

.group:before,
.group:after {
  content: "";
  display: table;
} 
.group:after {
  clear: both;
}
.group {
  zoom: 1; /* 这行是为了 IE 6/7 (触发 hasLayout) */
}

来自css tricks这个网站的文章:https://css-tricks.com/snippets/css/clear-fix/
这个网站对于css相关的文章有很多,也很生动并且易懂,推荐可以去看看
还有这个查询兼容的网站也非常的好用:https://www.caniuse.com/

2020年如何清除浮动?还在使用老的方式?clearfix?

标签:方式   Fix   splay   https   after   pre   http   添加   版本   

原文地址:https://www.cnblogs.com/xiaolantian/p/12643591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!