<!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不冲突吗？
最佳答案
这不是 clear 的作用。将 clear:both 放在一个元素上意味着该元素不能与它之前的任何 float 元素并排。它不会阻止跟随元素与它并排。
关于html - 为什么在清除 :both is mentioned? 时 float 命令起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37512635/