为什么使用"clear"属性 (css) 后保证金属性在"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输出屏幕截图

CSS代码屏幕截图

Answer 1

好吧，
1-当clear: both;是一个div时，你会清除它左边和右边的内容，所以div#3 clear什么都不做。。。
(例如：如果您同时给div#1和div#2clear: both;，则每个div都将获得自己的块，并破坏float: left;

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

3-由于div具有相同的CSS样式，我们应该一次选择所有div(阅读更多信息：CSS Selector Reference(

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