overflow:hidden解决高度塌陷原理

我们大家理解的overflow:hidden是超出该元素的部分进行隐藏,这个时候就需要明确一点,该元素的高度是怎么定义的。当一个div中的两个元素浮动之后,此时div的高度就会塌陷,此时div的高度为0。那是不是意味着就要将浮动元素隐藏起来,如果是真的隐藏就是反布局常识的。那是因为你不了解BFC机制。

定义:BFC(Block Formatting Context)全称是块级格式化上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生产一个独立的块级上下文,使这个块级元素内部的排版完全独立。

作用:独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器高度塌陷,就是说包含块会把浮动元素的高度也计算在内,所以就不用清除浮动来撑起包含块的高度。


具体请看----》原创作者详细解说

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,870评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,678评论 5 15
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 1,009评论 0 2
  • 我读《四书集注》
    眀一阅读 374评论 0 0
  • 主题:S8的RoxTiger也太强了吧?! 内容:龟鬼,会玩还是你们LCK会玩... #2 = = 咋了咋了,老年...
    你栈阅读 2,234评论 0 1