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

问题描述：

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

The parent height is set to auto but does not grow, because the child div has a float to the left. What is happening here, how can I fix it?

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

答

您可以在 wrap div

或清除浮点数.

解决方案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;
}

请参考以下链接以更好地理解:清除浮点数

Please refer the below link for better understanding: Clearing floats

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

相关推荐