이 도표는 박스(box)의 유동(loating) 효과를 설명한다.

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

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

1 Beginning of body contents. Start

2 of outer contents. End | Inner

3 of outer contents. End | contents.

4 of body contents.

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