Question

为什么我的边框不会绕过我的内部div，并且我的内部div边界不会到达外部div的底部（在FF中但是对于所有主要浏览器都需要这个）。

有人可以帮忙吗

<div id="main">
    <div class="insidediv">
        <p>Article 1</p>
    </div>
    <div class="insidediv">
        <p>Article 2</p>

    </div>
    <div class="insidediv">
<p>Article 3</p>
    </div>
</div>

#main{
    width: 800px;
    height: 100%;
    border: 20px solid black;
}

.insidediv{
    width: 200px;
    height: 100%;
    border-right: 20px solid black;
    float:left;
}

Answer 1

在overflow: hidden;上设置#main。

修改：demo

Answer 2

将#main更改为float: left;或overflow:hidden。我推荐浮动

Answer 3

浮动元素将它们从文档的正常流程中移除，这意味着它们的容器不再理解它们的结束位置，因为缺少更多技术性解释。要解决这个问题，你需要通过添加一个带有clear的元素来清除最后一个内部div之后的float：两个都应用了。 http://jsfiddle.net/calder12/BcqnE/

<div id="main">
<div class="insidediv">
    <p>Article 1</p>
</div>
<div class="insidediv">
    <p>Article 2</p>

</div>
<div class="insidediv">
<p>Article 3</p>
</div><div class="clear"</div>
</div>

#main{
width: 800px;
height: 100%;
border: 20px solid black;
}

.insidediv{
width: 200px;
height: 100%;
border-right: 20px solid black;
float:left;
}
.clear{clear:both;}

还有clearfix方法类似于上面的方法，但是现在更标准的方法。 http://j.mp/bestclearfix

CSS高度，如何让它绕过内部div

3 个答案: