父div由于浮动而忽略了孩子的身高

Question

父级高度设置为auto但不会增长，因为子div的左侧有一个浮点数。 这是怎么回事，我该如何解决？

js小提琴

的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

您可以更改溢出参数，但这会影响溢出行为。 使用浮点数与clear：all div一起使用，就像在展平线下追踪一条有想象力的线以开始新的一行一样。某种换行符，但对于浮点数...添加最后一个样式为clear的同级div：都

<div class="wrap">
   <div class="content">....</div>
   <div style="clear:both"></div>
 </div>

http://jsfiddle.net/Xksbs/6/

Answer 2

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

或clear the floats.

解决方案1：

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;
}

请参考以下链接以获得更好的理解： 清除浮点数

Answer 3

添加overflow:auto; 到父<div> ： JSFiddle

码：

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

Answer 4

设置子代的float值没有任何问题，您只需要在父div上添加overflow:hidden即可满足您的需要

http://jsfiddle.net/Xksbs/4/

Answer 5

就像Vincent Durpez所说的，在这里您可以看到

js小提琴[http://jsfiddle.net/Xksbs/5/]