首页 > 其他分享 >overflow:hidden解决高度塌陷原理

overflow:hidden解决高度塌陷原理

时间:2022-11-14 22:23:17浏览次数:37  
标签:浮动 元素 高度 utm 塌陷 overflow hidden

https://www.jianshu.com/p/4473bffef8a0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

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

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

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

标签:浮动,元素,高度,utm,塌陷,overflow,hidden
From: https://www.cnblogs.com/zhoading/p/16890706.html

相关文章