Html 为什么保证金资产不在；集装箱3“；使用后；清晰的；属性（css）？

您在附件中看到的所有3个容器都位于一个主容器内。我对前两个容器使用了“float:left”，对第三个容器使用了“clear:all”属性

但是，在将“clear”属性应用于第三个容器后，边距顶部似乎不起作用

请帮我回答以下问题：

为什么会这样

我怎样才能解决这个问题 谢谢

代码：

    div#insideContainer1
{
      max-width:        500px;
      padding:          20px;
      box-sizing:       border-box;
      border:           1px solid #e0e0e0;
      border-radius:    5px;

      float:            left;
}

div#insideContainer2
{
      max-width:        500px;
      padding:          20px;
      box-sizing:       border-box;
      border:           1px solid #e0e0e0;
      border-radius:    5px;

      margin-left:      20px;
      float:            left;
}

div#insideContainer3
{
      max-width:        500px;
      padding:          20px;
      box-sizing:       border-box;
      border:           1px solid #e0e0e0;
      border-radius:    5px;

      margin-top:       30px;
      clear:            both;
}

那么好吧，
1-当

清除时：两个一个div，你清除它左边和右边的内容，所以div#3 clear什么也没做。。。

（例如：如果同时给出div#1和div#2
clear:all；
每个div都将占用自己的块，并破坏
float:left；




2-在这种情况下，要打破浮动，您不需要同时清除这两个分区；

在这些分区中的任何一个分区中，都将是一个分区本身来清除和加速！

3-由于div具有相同的CSS样式，我们应该一次选择all（阅读更多：CSS选择器参考）。

HTML:

那好吧，
1-当

clear:both；

a div时，您清除其左右两侧的内容，因此div#3 clear什么也不做。。。
（例如：如果同时给出div#1和div#2

clear:all；

每个div都将占用自己的块，并破坏

float:left；

2-在这种情况下，要打破浮动，您不需要同时清除这两个分区；在这些分区中的任何一个分区中，都将是一个分区本身来清除和加速！

3-由于div具有相同的CSS样式，我们应该一次选择all（阅读更多：CSS选择器参考）。

HTML:

---

欢迎使用Stack Overflow！请在questionSure@Joundill中包含代码和重现问题的最简单方法。欢迎使用Stack Overflow！请在questionSure@Joundill中包含代码和重现问题的最简单方法。

<div class="container">
    <div class="div1"></div> 
    <div class="div2"></div>
    <div class="clear-both"></div> 
    <div class="div3"></div>
</div>

.div1,
.div2,
.div3{
    width: 500px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #f40b0b;
    margin: 10px;
}

.div1, .div2 {
    float: left;
}

.div3 {
    background-color: aqua;
}

.clear-both {
    clear: both;
}