父div随着子div的高度改变而改变

u013363256

于 2016-03-31 09:57:49 发布

阅读量8.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签：父div高度问题

本文链接：https://blog.youkuaiyun.com/u013363256/article/details/51023633

css 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在不同情况下父div如何随子div的高度变化而变化，包括标准流及浮动布局下的处理方式。

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

父div随着子div的高度改变而改变问题

情况1:父div未设置高度，子div为标准流(即未设置浮动)

<body>
    <div class="aa">父div
        <div class="bb">子div</div>
        <div class="cc">子div</div>
    </div> 
</body>

此时的父div随着子div的改变而改变

情况2:父div设置高度，子div为标准流(即未设置浮动)

<style type="text/css">
.aa{
    height:50px;
}
</style>
<body>
    <div class="aa">父div
        <div class="bb">子div</div>
        <div class="cc">子div</div>
    </div> 
</body>

此时的父div高度不会随着子div的改变而改变

情况3:父div未设置高度，子div脱离标准流(设置了float)

<style type="text/css">
.aa{
    height:50px;
}
.bb{
    float:left;
}
.cc{
    float:left;
}
</style>
<body>
    <div class="aa">父div
        <div class="bb">子div</div>
        <div class="cc">子div</div>
    </div> 
</body>

此时的父div的高度不随子div的高度改变而改变，但在父div中加overflow:hidden就可实现随着子div高度的改变而改变。