html - 如何根据内容强制容器扩展高度

Question

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

请看下图:

我希望我的 div 的大小为三个元素 .c1、.c2 和 .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 类以识别它的 child 的高度.

JSFiddle