Este diagrama ilustra el efecto de flotar una caja ("interno") y como su "hermano" es forzado hacia abajo debido a la propiedad 'clear'.
Se muestra una ventana de documento, con 8 líneas (numeradas de 1 a 8), cada una de 24px del alto. El texto anterior a la caja de "interno" fluye sobre la línea 1 y parcialmente en la línea 2. La caja de "interno" es flotante sobre la derecha y ocupa la segunda mitad de las líneas 2 y 3. La caja hermana fluye sobre la siguiente línea (línea 4) y es seguida por el texto que resta.
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 | interno. 4 Tema hermano. Fin del tema 5 externo. El final del 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.