На этой диаграмме показан всплывающий бокс ("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" - красный.