为什么在使用“ clear”属性（css）后，margin属性在“ container3”中不起作用？

Question

您在附件文件中看到的所有3个容器都在一个主容器内。我在第一个容器中使用了“ float：left”，在第三个容器中使用了“ clear：both”属性。

但是，在将“ clear”属性应用到第三个容器后，margin-top无法正常工作。

请帮助我解决以下问题：

1. 为什么会这样？
2. 我该如何解决？

谢谢！

代码：

    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;
}

CSS Output Screenshot

CSS Code Screenshot

Answer 1

然后1-当clear: both; div时，您清除左右两侧的内容，因此div＃3 clear不会执行任何操作...（例如：如果您同时给div＃1和div＃2 clear: both;，则每个div都将占用自己的代码块，这会破坏float: left;2-在这种情况下，要打破浮点数，您无需在任何这些div中使用clear" both;，它就会成为divdiv]来进行清除和分隔！3-由于div具有相同的CSS样式，因此我们应该一次选择所有内容（了解更多：CSS选择器参考）。

HTML：

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

CSS：

.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;
}