이 도표는 유동하는(floating) 박스("inner")의 효과와 어떻게 이들의 형제("sibling")가 그에 따라 흐르는가를 설명한다.

문서 창에 각각 24px 높이의 1 - 8 수치가 붙은 줄들 보인다.
"inner" 박스가 오른쪽으로 유동(float)되었슴으로, 그 형제("sibling") 박스(줄들 1에서 5)의 것을 포함하여 모든 다른 텍스트(1에서 4 줄들)는 그 주위에 흐른(flow)다.

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

1 Beginning of body contents. Start

2 of outer contents.     | Inner

3 Sibling contents. End  | contents.

4 of outer contents. End of body

5 contents.

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