Полное изложение примера всплывания с 'clear'

На этой диаграмме показан всплывающий бокс ("inner") и как его "родственники" выталкиваются вниз при применении свойства 'clear'.

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

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

1 Beginning of body contents. Start 

2 of outer contents.     | Inner

3                        | contents.

4 Sibling contents. End of outer 

5 contents. End of body contents.

По умолчанию цвет текста - чёрный. "Start of outer contents" -алый. "Inner contents" - голубой. "Sibling contents" - алый. "End of outer contents" - алый.

Вернуться к изображению.