이 도표는 텍스트(text) 주위에 유동(float)이 어떻게 흐르는가(flow),
그리고 특히, 유동 박스(마진 포함)를 위한 공간을 만들기 위하여, 내용(content)의 줄 박스들을 따라 어떻게 유동(float)이 짧아지는가를 설명한다.
예제의 HTML 문서는 이 이미지를 만든다.
그 원본 문서 안에, 본체(body) 엘레멘트는 왼쪽으로 유동된 IMG를 갖는 P를 포함한다.

맨위 설명 "max (BODY margin, P margin)"은 수직 마진들의 통합(collapse)을 나타낸다.
그러나, IMG은 유동되었으므로, 그 IMG 마진은 이 계산에 포함되지 않는다.

왼쪽 면(side)의 설명에서, BODY, P와 IMG의 왼쪽 마진들은 통합되지 않는다:
수평(horizontal) 마진들은 통합되지 않음.

그 문단 텍스트는 IMG의 오른쪽 면(side)을 따라 유동하는데,
그 오른쪽 마진의 맨위에서 시작하여 오른쪽으로 흐른다.
텍스트가 IMG 바닥 마진 의 바닥(bottom)에 도달하면, P 엘레멘트(element) 안에서 정상적으로 계속된다.
이렇게, 줄 박스들은 유동을 따라 짧아진다.