display:flow-root

以前在float的问题上,大家都必须做的一件事情,清除浮动
其实清除浮动的方法已经很多很多了
我还是比较喜欢
clear: both

overflower:hidden

现在有多了一个方法
display: flow-root;
这个方法吧,比前面感觉也并没简单多少,好处就是对父元素高度设置友好

然后兼容低版浏览器问题,解决方法
.wrapper{display: flow-root;} @supports not (display:flow-root) { .wrapper::after { content: ''; display: table; clear:both; } }
新的东西还是多学学,以后兼容都不是问题的时候,应该还是不错的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 学习flow-root前,我们要先了解下BFC的概念。 在W3C规范中BFC是这样定义的: 浮动元素和绝对定位元素...
    菇凉大大阅读 4,258评论 0 1
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,277评论 0 1
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 1,086评论 0 2
  • 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题。当然,随着时间的推移...
    郝特么冷阅读 866评论 0 6