为什么在使用 "clear" 属性 (css) 后，保证金属性在 "container3" 中不起作用？

Question

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

但是，似乎在将“clear”属性应用到第三个容器之后，margin-top不是'工作。

请帮我解决以下问题：

为什么会这样？
我该如何解决这个问题？

谢谢！

代码：

    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; a div 时，你清除了它左右两侧的内容，所以 div#3 clear 什么都不做......
（例如：如果你同时给出 div#1 和 div#2 clear: both;，每个 div 都会占用它自己的块，它会破坏 float: left;

2- 在这种情况下要打破浮动，你不需要在任何这些 div 中使用 clear" both;，它将是 div 本身 清除和sperate！

3- 由于 div 具有相同的 CSS 样式，我们应该一次 select （阅读更多： 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;
}

为什么在使用 "clear" 属性 (css) 后，保证金属性在 "container3" 中不起作用？

Why margin property is not working in the "container3" after using "clear" property (css)?

html

css

css-float

为什么在使用 "clear" 属性 (css) 后，保证金 属性 在 "container3" 中不起作用？

Why margin property is not working in the "container3" after using "clear" property (css)?

html

css

css-float

为什么在使用 "clear" 属性 (css) 后，保证金属性在 "container3" 中不起作用？