CSS 浮动和填充

Question

这是 HTML 布局：

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

我在左侧 div 中使用了 float: left ，在右侧 div 中使用了 float: right 。然后，我对容器使用了 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;
}

示例。

Answer 1

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

Answer 2

将右浮动 div 放在左浮动 div 之前

Answer 3

不要使用浮动，而是使用 flex 并将内容调整为空格

 #container{
  background-color: #FFFFFF;
  padding: 10px 10px 0;
  width: 980px;
  display: flex;
  justify-contents: space-between;
 }