overflow:hideen清除浮动影响

overflow:hideen清除浮动影响 【overflow:hideen清除浮动影响】实际工作中一些模块常因高度是可变不确定的而只会给盒子宽度,不设置高度。在这些父级盒子里再放置浮动流盒子的话,因为浮动盒子是脱标不占位置的,此时父级盒子既本身没有高度,又没有子盒子占有高度,因此他约等于一条线甚至不存在,子盒子会显示在他下面还会盖住下一个标准流盒子,这就是不设父盒子高度,子盒子浮动带来的影响,需要添加overflow:hideen清除浮动。overflow:hideen清除浮动影响
文章图片

三个盒子都设置了高度,大家各论各的。
overflow:hideen清除浮动影响
文章图片

把父盒子高度注释掉,f5刷新发现粉色父盒子没了,网页调试工具点击指出的father盒子位置还是在蓝盒子上的,只是 100*0 高度没有,显示不了
overflow:hideen清除浮动影响
文章图片

添加overf:hidden后,父盒子又出现了,而且此时的高度和子盒子一样,当你调整子盒子高度时,他也会跟着调整的。

    推荐阅读