Поведение в потоке

При задании боксу свойства float сам бокс и следующие за ним в потоке приобретают следующее поведение:

● Обтекаемый бокс смещается по горизонтали и прилипает к одной из сторон родителя.

● Обтекаемый бокс перестает раздаваться на всю ширину родительского бокса-контейнера (как это происходит с блоками в потоке). С его неприжатой к родителю свободной стороны появляется свободное место.

При задании боксу свойства float сам бокс и следующие за ним в потоке приобретают следующее поведение:

● Следующие за ним блочные боксы подтягиваются вверх и занимают его место, как если бы Обтекаемого бокса в потоке не было.

● Строчные же боксы внутри подвинувшихся наверх блоков начинают обтекать Обтекаемый бокс со свободной стороны.

Интересно, как себя ведут Обтекаемые по одной стороне боксы, которые идут один за другим. В этом случае следующий бокс будет пытаться уместиться сбоку от предыдущего, с его свободной стороны. И только если ему там не будет достаточно места, тогда он сместится ниже и будет пытаться уместиться уже там.

Особо нужно отметить п.3 вышеприведенного списка, а именно такую неочевидную сразу вещь: сама коробка блока, следующего за float'ом, подлезает под него и занимают всю ширину потока, а вот текст внутри этого блока смещается в сторону и обтекает float.

Зачем?

Зачем надо было придумывать такие сложности: разделить понятие блока так, чтобы цвета и рамки наверх, а текст - на месте?

Пусть сдвигаемая картинка занимает по высоте больше, чем текст абзаца. Если она будет растягивать свой абзац и отодвигать начало следующего ниже, то это будет выглядеть некрасиво из-за увеличенного расстояния между строками соседних абзацев. Поэтому она и проваливается через все границы блоков, сохраняя между ними красивые отступы, а текст ее обтекает.

Для устранения подтягивания блоков существует специальное свойство - clear.

Clear

Данное свойство заставляет элемент сдвигаться вниз, пока сбоку от него не останется Обтекаемых элементов. Причем можно управлять, с какого именно бока не должно быть float'ов: