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

Posted 2021-03-02 xiaolantian

将 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/