css float和padding

Question

这是HTML布局：

        <div class="wrap">
           <div id="container">
               <div id="left">...</div> 
               <div id="right">...</div> 
            </div>
        </div>

我将float: left用于左侧div，将float: right用于右侧div。然后，我将padding-top: 10px用于容器。为什么不起作用？谢谢。

这是我的第一个风格：

.wrap {
    float: left;
    width: 1000px
}

#container{
    background-color: #FFFFFF;
    padding: 10px 10px 0;
    width: 980px;
    float: left;
}

#left {
    float: left; 
    width: 670px;
}

#right {
    float: right;
    width: 300px;
}

Example here

Answer 1

浮动元素时，它会有效地将其从文档流中取出，因此向其父级添加填充不会对其产生影响。您可以在两个内部div上使用margin-top: 10px;。

Answer 2

在浮动离开div之前放置右浮动div