html - 父 div 忽略了子元素的高度，因为它是 float 的

Question

父级高度设置为自动但不增长，因为子级div向左浮动。这里发生了什么，我该如何解决？

js fiddle

HTML

<div class="wrap">
   <div class="content">....</div>
 </div>

CSS

.wrap{
background: blue;
width:600px;
height: auto;
border: solid 3px;
}

.content{
background: red;
width:200px;
padding: 10px;
height: auto;
float: left;
 }

Answer 1

您可以将 overflow:auto 添加到您的 wrap div

或清除 float 。

解决方案一:

HTML:

<div class="wrap">
   <div class="content">....</div>
 </div>

CSS:

.wrap{
    background: blue;
    width:600px;
    height: auto;
    border: solid 3px;
    overflow:auto;
}

解决方案 2:

<div class="wrap">
   <div class="content">....</div>
   <div class="clr"></div>
</div>

CSS:

.clr
{
clear:both;
}

请引用以下链接以获得更好的理解: Clearing floats