如何根据容器的内容强制容器的高度扩大

Question

如果我们检查代码，您会看到div.header有height: 0px;

请看下面的图片：

我希望我的div大小为三个元素.c1，.c2 and。c3`

我该如何解决这个问题呢？ 我希望我们能够解释我的问题。

HTML：

   <div class="container">
    <div class="header">            
        <div class="c1">asdsadsadsadasda</div>
        <div class="c2">asdasdas</div>
        <div class="c3">sadsada</div>            
    </div>
</div>

CSS：

.container
{
    width:100%;
    height:500px;
    background:red;

}
.c1
{
    width:auto;
    height:auto;
    background:yellow;
}

.c2
{
    width:auto;
    height:auto;
    background:gray;
}


.c3
{
    width:auto;
    height:auto;
    background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}

.header{width:70%;height:auto;margin:0 auto;background:blue;}

JSFiddle

Answer 1

将overflow: auto（例如）css属性添加到.header课程，以识别其子女的height。

JSFiddle

Answer 2

使用清除div。

HTML：

<div class="container">
    <div class="header">

        <div class="c1">asdsadsadsadasda</div>
        <div class="c2">asdasdas</div>
        <div class="c3">sadsada</div>
        <div class='clearing'></div>
    </div>
</div>

CSS：

 .clearing {clear:both;}