css - 为什么父 div 不扩展到子 div？

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

添加 overflow:hidden 到 .player:

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

发生这种情况是因为您在 .player 中 float 了元素，因此容器崩溃了。溢出:隐藏；是解决方案之一，您也可以使用伪元素:

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

或者创建一个新的临时元素并将其放在 .player 的底部

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

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

另外，需要去掉元素里面的固定高度:

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