¿Cómo funciona CSS ‘overflow: hidden’ para forzar un elemento (que contiene elementos flotados) para envolver los elementos flotados?

Alguien sabe por qué desbordamiento: fuerzas ocultas un elemento con elementos flotantes para envolver los elementos?

Realmente quiero entender el funcionamiento interno en lugar de solo usarlo y confiar en que ‘simplemente funciona’.

Puedo entender cómo funciona cuando el elemento que contiene se flota en la misma dirección que los elementos secundarios que flotan, pero desbordamiento: medios ocultos para recortar el contenido desbordado (cuando se utiliza con la posición: absoluta / relativa).

Cualquier información apreciada.

Flotantes, elementos absolutamente posicionados, bloques en línea, celdas de tabla, pies de tabla y elementos con ‘desbordamiento’ que no sean ‘visibles’ (excepto cuando ese valor se ha propagado a la ventana gráfica) establecen nuevos contextos de formateo de bloques.

En un contexto de formato de bloque, el borde externo izquierdo de cada cuadro toca el borde izquierdo del bloque que lo contiene (para el formateo de derecha a izquierda, toque los bordes derechos). Esto es cierto incluso en presencia de flotadores (aunque los recuadros de líneas de un recuadro pueden reducirse debido a los flotantes), a menos que el recuadro establezca un nuevo contexto de formateo de bloques (en cuyo caso el recuadro se puede estrechar debido a los flotantes).

El contexto de formato de bloque borra los flotantes. Fuente: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Explicación completa del modelo de formato Visual, parte 9.2 “Flotantes” de las especificaciones de CSS2:

El cuadro de borde de una tabla, un elemento reemplazado de nivel de bloque o un elemento en el flujo normal que establece un nuevo contexto de formato de bloque (como un elemento con ‘desbordamiento’ que no sea ‘visible’) no debe superponer ningún flotante en el mismo contexto de formato de bloque que el elemento en sí. Si es necesario, las implementaciones deben borrar dicho elemento colocándolo debajo de cualquier flotador anterior, pero puede colocarlo adyacente a dichos flotadores si hay suficiente espacio. Incluso pueden hacer que la caja de frontera de dicho elemento sea más estrecha que la definida en la sección 10.3.3. CSS2 no define cuándo un UA puede colocar dicho elemento al lado del flotante o en qué medida dicho elemento puede volverse más estrecho.

Bueno, parece que no hay una explicación ‘real’ de por qué sucede esto (no uno que pueda entender de todos modos, por ejemplo, el fragmento de especificaciones de CSS proporcionado en una de las respuestas simplemente explicaba que una caja con contenido flotante no debería expandirse para envolver los elementos flotados – lo cual está bien y eso es lógico y lo entiendo por completo)

Esperaba que esto no fuera un hack aleatorio que forzara al elemento padre a envolver sus elementos secundarios flotantes, pero parece que cada recurso que miro solo dice que lo use y no por qué funciona.

Debe ser solo un truco.

El recurso más útil que encontré (o el que proporcionó más detalles, aunque no tantos detalles como necesitaba) fue de Quirksmode: http://www.quirksmode.org/css/clearing.html

Gracias si alguien más puede arrojar luz sobre si este es un capricho de representación aleatorio del navegador o si tiene una explicación lógica para funcionar de la manera en que lo hace.

METRO.