overflow解决float浮动后高度自适应问题

最新推荐文章于 2024-12-12 14:50:11 发布

a182565gtw

最新推荐文章于 2024-12-12 14:50:11 发布

阅读量125

点赞数

本文链接：https://blog.youkuaiyun.com/a19905522/article/details/84229507

版权

本文探讨了在网页布局中使用浮动(float)属性时遇到的问题，即浮动元素可能导致其父级容器高度计算不准确。文章提供了几种解决方案，包括使用`overflow:auto`和`zoom:1`来确保容器能够正确地包裹其内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

也许你在做网页的时候发现，发一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了。
如图中的城市导航内的城市列表中采用了float之后，那个外框的高度并不是内容元素的高度：


怎么解决这个问题呢？经发现可以采用overflow来解决！方法是在父元素加上如下代码即可

overflow:auto; zoom:1;
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。