이 도표는 유동하는(floating) 박스("inner")의 효과와 'clear' 특성 어떻게 이들의 형제("sibling")이 강제로 아래로 흐르는가를 설명한다.

문서 창에 각각 24px 높이의 1 - 8 수치가 붙은 줄들 보인다.
텍스트(text)가 "inner" 박스 이전에 줄들 1와 줄 2 중간에서 오른쪽으로 유동(float)하고,
그 "inner" 박스는 그 오른쪽으로 유동되어 두번째 중간 부분까지와 줄들 3과 4를 차지한다.
그 형제(sibling) 박스는 다음 줄 4 에흐르고 그 뒤에 텍스트의 나머지가 온다.

다음 PRE 엘레멘트(element)에, 각 24 pixel 줄은 두 줄씩 띄워 묘사하였고,
그 두번째 시작에 해당 수치를 표시하였다.
수직 바(bar)들 유동된(floated) 박스(box)의 왼쪽 모서리(edge)를 나타낸다.
그 줄들은 이미지에서 나타나는 것과 같이:

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.

그 디폴트(default) 텍스트(text) 색상(color)은 검정이다.
"Start of outer contents"은 적색.
"Inner contents"은 청색.
"End of outer contents"은 적색이다.