0
<!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Почему команда float работает, когда она чиста: оба упоминаются?
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;
}
Здесь я упомянул clear:both для block3. Поэтому я предположил, что даже если я упоминаю float:left, это не влияет. Как блок4 входит в оставшееся правое пространство для block3? Не вступает ли конфликт с clear:both блока3?
о 'clear' собственности: http://stackoverflow.com/a/36525225/3597276 –