内容超出div

Question

这就是我在HTML中配置div的方法

<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>

而这就是div的css

#wrapper {
    border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
    margin-top: 15px;
    margin-bottom:15px;

}
#content {
margin-left:20px;
width:1008px;
    }
#details-middle
{
float:left;
width:700px;

}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px; 
padding:10px 12px;
background-color: #FFF;
}

一切都显示出div的..

Answer 1

你是浮动的details-middle,这意味着非浮动的元素不会为它腾出空间,除非它们自己浮动,或者你清除浮动.

我的首选解决方案是给父母overflow: hidden;一个强迫父母为其漂浮的孩子腾出空间的父母:

#content
{
    margin-left:20px;
    width:1008px;
    overflow: hidden; /* change here */
}