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的剩余右侧空间？是不是与block3的clear:both冲突了？

Answer 1

这不是什么明确的。说清楚：在元素上都意味着元素不能与它之前的任何浮动元素并排。它并不会阻止元素跟随它。

Answer 2

你有一个结束div标签太多了，你的开头HTML标签应该在head部分之上。也许这就是你看到奇怪行为的原因。

为什么浮动命令在清除时有效：两者都提到了？

2 个答案: