overflow:hideen清除浮动影响

最新推荐文章于 2022-04-06 21:56:59 发布

东隅yuuu

最新推荐文章于 2022-04-06 21:56:59 发布

阅读量417

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_45064972/article/details/105527710

版权

overflow:hideen清除浮动影响

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

把父盒子高度注释掉，f5刷新发现粉色父盒子没了，网页调试工具点击指出的father盒子位置还是在蓝盒子上的，只是 100*0 高度没有，显示不了

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