Надо, чтобы синий блок плавал вправо вверху контейнера #wrapper
, а не уходил вниз вместе со вторым красным блоком.
Вопросы:
Почему синий блок уходит вниз вместе с красным блоком?
Как сделать так, чтобы синий блок плавал вправо вверху контейнера?
#wrapper {
color: #fff;
width: 1200px;
height: 500px;
margin: 0 auto;
background-color: #000;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 200px;
height: 200px;
background-color: darkblue;
}
.clear {
clear: both;
}
<div id="wrapper">
<div>
<div class="left"></div>
<div class="clear"></div>
</div>
<div>
<div class="left"></div>
</div>
<div class="right"></div>
</div>