Описание примера плавающего блок без значения clear

Эта диаграмма иллюстрирует эффекты плавающего смещения блока, и как его сосед ("sibling") располагается вдоль него.

Показано окно документа с 8 строками (пронумерованы от 1 до 8), каждая высотой 24px. Так как блок "inner" был смещен вправо, то весь остальной текст размещен вокруг него, включая соседний блок (строки с 1 по 5).

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

1 Beginning of body contents. Start 

2 of outer contents.     | Inner

3 Sibling contents. End  | contents.

4 of outer contents. End of body
 
5 contents.

Цвет текста по умолчанию – черный. Предложение "Start of outer contents" – красное. Фраза "Sibling contents" - красная. Предложение "Inner contents" - голубое. Фраза "End of outer contents" - красная.