Question

当我使用firebug并将鼠标悬停在父框上时，不会显示任何内容。我原以为它会突出显示3个子框（因为它们是孩子们）。

当我从子框中移除浮动时，它可以正常工作。

<div class="parentbox">
    <div class="subbox">box1</div>
    <div class="subbox">box2</div>
    <div class="subbox">box3</div>
</div>  

.parentbox
{

}

.subbox
{
     margin-right:10px;
     font-size:50px;
     float:left;
}

Answer 1

尝试：

.parentbox
{
   overflow:auto;
}

仅供参考：Firebug不会突出显示子元素，只会突出您关注的元素。

更好的方法是：

<div class="parentbox">
    <div class="subbox">box1</div>
    <div class="subbox">box2</div>
    <div class="subbox">box3</div>
    <div style="clear:left;"></div>
</div>

请参阅http://jsfiddle.net/3f22H/进行比较 - 它们都有类似的最终结果。

Answer 2

你有没有理由漂浮内盒？如果要么移除它们的浮点数或向父类添加浮点数，它将修复。否则你需要清除孩子们的花车。

Answer 3

计算父项维度时，浮动子项不会添加到父项的高度（在您的情况下，它的高度将为0）。您需要应用clearfix hack来强制父项绘制，直到它最底层的孩子为止。

这是一篇很好的文章explains the topic。

我的CSS在这里有什么问题。向左浮动导致问题

3 个答案: