Описание примера плавающего смещения

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

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

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

1 Beginning of body contents. Start 

2 of outer contents. End | Inner

3 of outer contents. End | contents.

4 of body contents.

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