float применяют для управления ПОТОКОМ документа и создания СЕТОК
ЕСЛИ в стилях есть float, то ВСЕГДА УКАЗЫВАЙТЕ значение ШИРИНЫ!!!
<div class="container">
<div class="box box-left">1</div>
<div class="box box-right">2</div>
</div>
.box-not-floated {
height: 75px;
width: 75px;
background-color: lightyellow;
border: 1px solid orange;
}
.box {
height: 50px;
width: 50px;
background-color: maroon;
border: 1px solid cyan;
color: white;
}
.box-left {float: left;}
.box-right {float: right;}
float используется для выравнивания блоков по сторонам (1 - слева, 2 - справа)
<div class="container">
<div class="box-not-floated">1</div>
<div class="box box-left">2</div>
</div>
float-ы выпадают из потока и блочные элементы их НЕ ВИДЯТ, а текст обтекает их со свободной стороны
<div class="container">
<div class="box box-left">1</div>
<div class="box box-right">2</div>
<div class="box-not-floated clear">2</div>
</div>
.clear {
clear: both;
}
Чтобы другие блочные элементы "видели" флоатнутые, их либо нужно тоже зафлоатить или применить свойство
clear со значениями left, rigth или both.
Оно запрещает обтекание и переносит элемент на новую строку.
clear: none; разрешает обтекание.