¿Qué significa que un elemento flotante se saque del ‘flujo’ de la página?

Editar: si necesita ayuda con respecto a su situación específica, entonces esta respuesta puede ser más adecuada. Mi respuesta asume que no tienes idea de lo que significan esas palabras y necesitas una introducción amable.

¿Cómo funcionan los elementos CSS ‘flotante’ y ‘posición’?

La respuesta original sigue:

Oh chico…

Esencialmente, HTML, el lenguaje de marcado de hipertexto de la red mundial, utiliza algo llamado modelo BOX: los elementos individuales del contenido de la página residen en BOXES rectangulares, y cuando se representan (colocan), el navegador debe analizar cuidadosamente las relaciones entre estos cuadros, como “Este cuadro debe estar dentro de ese cuadro”, antes de que pueda proporcionar dimensiones específicas para cada uno de esos cuadros y mostrarlos.

Puede ver qué tan bien (o qué tan mal) funciona cuando cambia el tamaño del contenido (Ctrl + Rueda de desplazamiento o Ctrl + [más / menos]); en algún momento, los paneles laterales pueden desaparecer porque se mueven por debajo o por encima del cuadro principal.

Los elementos que se colocan “uno tras otro” en la fuente de la página generalmente se muestran en la misma secuencia, en el mismo flujo, uno tras otro.

Asi que

[p] Este es un párrafo [/ p] [p] Este es un segundo párrafo [/ b]

Aparecería como:

Este es un parrafo

Este es un segundo párrafo

Sin embargo, también puede decirle a un elemento específico que debe eliminarse del flujo estándar, en cuyo caso ignorará otros elementos y sus posiciones (o cuadros) y simplemente aparecerá en el lugar donde lo desee.

Esto es útil para todo tipo de cosas, como si desea que algún menú de la página esté siempre visible en la esquina o en el borde superior.

Solo para agregar a la gran respuesta de Pavel. Aquí hay un Codepen que ayuda a visualizar flotante y claro.

CSS Floats Playground