Este diagrama ilustra el efecto de flotar una caja ("interno") y cómo su "hermano" fluye al lado de ella.
Se muestra una ventana de documento, con 8 líneas (numeradas de 1 a 8), cada una de 24px del alto. Como la caja de "interno" es flotante a la derecha, todo el texto que resta fluye alrededor de ella, incluyendo el de la caja del "hermano" (sobre las líneas 1 a 5).
En el siguiente ejemplo con un elemento PRE, cada línea de 24px es simulada por dos líneas, la segunda comienza con el número apropiado. Las barras verticales representan el borde izquierdo de la caja flotante. Las líneas, tal como aparecen en la imagen, contienen:
1 El comienzo del contenido. Este 2 es el tema externo. | Tema 3 Tema hermano. Fin | interno. 4 del tema externo. El final del 5 contenido.
El color de texto predeterminado es negro. "Este es el tema externo" es rojo. "Tema hermano" es rojo. "Tema interno" es azul. "Fin del tema externo" es rojo.