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

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

Показано окно документа с 8 строками (пронумерованные от 1 до 8), каждая высотой 24px. Текст перед блоком "inner" размещается в строке 1 и на половине строки 2. Блок "inner" был смещен вправо и занимает вторую половину строк 3 и 4. Соседний блок расположен в следующей строке 4, и далее идет оставшийся текст.

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

1 Beginning of body contents. Start 

2 of outer contents.(5)     | Inner

3(24)                        | contents.

4 Sibling contents. End of outer 

5 contents. End of body contents.

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