父级元素与子集元素浮动影响的解决

最新推荐文章于 2025-02-07 15:55:46 发布

weixin_38170137

最新推荐文章于 2025-02-07 15:55:46 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lgqtecng/p/7345666.html

本文探讨了当子元素使用浮动布局时，如何通过设置父元素的overflow属性来解决父元素高度塌陷的问题。通过实例展示了使用overflow:hidden或auto来包含浮动元素，并避免父元素因浮动而消失的现象。

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

<style>
    .box{
        background-color: yellow;
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
<div class="box">
    <div class="box1">div1</div>
    <div class="box2">div2</div>
</div>
</body>

先看现在的效果：

将div1和div2进行左浮动，会发现：

父级元素不见了，因为div1和div2脱离了标准流，父级元素么有框高属性，没东西撑开了，所以会受到浮动的影响消失，解决办法用overflow:hidden或者overflow:auto，个人理解为超出的东西让它隐藏或者父元素就会扩展包含浮动，但是，要记住一点，overflow属性不是为了清除浮动而定义的，要小心不要覆盖住内容或者触发了不需要的滚动条。

<style>
    .box{
        background-color: yellow;
         overflow:atuo;     //或者是hidden
    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
<div class="box">
    <div class="box1">div1</div>
    <div class="box2">div2</div>
</div>
</body>