Question

我有以下fiddle来证明我的问题，名为.player的父div不会扩展到与游戏列表相同的高度。

.player{
    width:471px; 
    height:auto; 
    margin: 20px 10px 10px 20px; 
    background-color: rgb(12, 167, 210);
}

我已经查看了类似问题的StackOverflow，并且有overflow:hidden，clear:both等指示，但似乎没有任何工作，所以我把它们带走以显示我的原始代码。也许我错过了什么。

Answer 1

添加溢出：隐藏到.player：

.player {
   width: 471px;
   height: auto;
   clear: both;
   margin: 20px 10px 10px 20px;
   background-color: rgb(12, 167, 210);
   overflow: hidden;
}

这是因为您在.player内部浮动元素，因此容器崩溃。溢出：隐藏;是解决方案之一，您也可以使用伪元素：

.player:after {
   content: " ";
   display: block;
   clear:both;
   float: none;
}

或创建一个新的ad-hoc元素并将其放在.player

的底部

<div class="clear-floats"></div>

.clear-floats {
    clear: both;
    float: none;
}

此外，您需要删除元素内的固定高度：

.gamescontain {
    width: 237px;
    /* height: 400px; REMOVE THIS */
    float: right;
    clear: both;
}

Answer 2

你应该添加overflow：hidden;到.player css class

.player{width:471px; height:auto; clear:both; margin: 20px 10px 10px 20px; background-color: rgb(12, 167, 210); overflow:hidden;}

并删除.gamescontain

的高度

.gamescontain{width:237px;float:right; clear:both;}

Answer 3

添加溢出：隐藏到.player：

.player {
   width: 471px;
   height: auto;
   clear: both;
   margin: 20px 10px 10px 20px;
   background-color: rgb(12, 167, 210);
   overflow: hidden;
}

Answer 4

除了将overflow:hidden添加到.player类之外，从.gamescontain中删除clear:both：

.gamescontain{width:237px;height:400px;float:right;}

为什么父div不会扩展到子div？

4 个答案: