为什么在提到 clear:both 时 float 命令起作用？

Question

 <!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>

 <html>

<div class="container">
    <div id="block1"></div>
    <div id="block2"></div>
    <div id="block3"></div>
    <div id="block4"></div>
    <div id="block5"></div>
    <div id="block6"></div>
</div>



 </html>

css

body
{
    margin:0px;
    padding:0px;
}

.container
{
    //height:300px;
    width: 600px;
    margin-left:auto;
    margin-right:auto;
    background-color: #C0C;
}

#block1
{
    height:100px;
    width:200px;
    float:left;
    background-color:#0c0;
}
#block2
{
    height:100px;
    width:300px;
    float:left;
    background-color:#cc0;
}
#block3
{
    height:100px;
    width:100px;
    clear:both;
    float:left;
    background-color:#0cc;
}
#block4
{
    height:100px;
    width:500px;
    background-color:#AF0;
    float:left;
}

#block5
{
    height:100px;
    width:500px;
    float:left;
    background-color:#BBB;
}

#block5
{
    height:200px;
    width:100px;
    float:left;
    background-color:#ADD;
}

这里我提到了block3的clear:both。所以我假设即使我提到 float:left 也没有任何影响。 block4如何进入block3剩余的space权？和block3的clear:both不冲突吧？

Answer 1

您的结束 div 标签太多，您的开始 HTML 标签应该在标题部分上方。也许这就是您看到奇怪行为的原因。

Answer 2

这不是 clear 的作用。将 clear:both 放在一个元素上意味着该元素不能与它之前的任何浮动元素并排。它不会阻止跟随元素与它并排。

为什么在提到 clear:both 时 float 命令起作用？

Why does float command work when clear:both is mentioned?

html

css

css-float