目前最新清除浮动方式 兼容 IE8 及以上

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

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

提示: 现在2020年,开发模式基本都是Vue这类的,很少项目会去兼容 IE6 和 IE7 和 IE8了,Vue也是仅仅只支持IE9及以上而已, 而上面这行代码还兼容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/

posted @ 2020-04-06 18:50  StackOcean  阅读(689)  评论(0编辑  收藏  举报