父div由于浮动而忽略了孩子的身高 [英] Parent div ingnores height of child because of its float

问题描述

父级高度设置为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由于浮动而忽略了孩子的身高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！