.d{clear:both}
Вот что у тебя происходит, только упрощенно:
<!DOCTYPE html>
<style>
.floated{
float: left;
background: blue;
width: 100px;
height: 100px;
opacity: 0.5;
}
.reqular{
background: red;
}
</style>
<div class="floated"></div>
<div class="reqular">abc cde<br>efg</div>
Таким образом, floated блоки не влияют на позиционирование других блоков, но при этом смещают их содержимое.