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

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。

编辑：演示

Answer 2

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

Answer 3

浮动元素将它们带出文档的正常流程，这意味着它们的容器由于缺乏更多技术解释而不再了解它们的结束位置。要解决这个问题，您需要在最后一个内部 div 之后通过添加一个应用 clear:both 的元素来清除浮动。 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