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

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

Изображено окно документа с  8 строками (пронумерованными 1 до 8), каждая по 24px высотой. Текст перед боксом "inner" обтекает в первой и в половине второй строки. Бокс "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" - красный.

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