Hacer que el niño sea visible fuera de un desbordamiento: padre oculto

En CSS, el overflow:hidden se establece en los contenedores principales para permitir que se expanda con la altura de sus hijos flotantes.

Pero también tiene otra característica interesante cuando se combina con margin: auto

Si ANTERIOR hermano es un elemento flotante, realmente aparecerá yuxtaponerlo. Es decir, si el hermano está float:left , el contenedor con float:none overflow:hidden aparecerá a la derecha del hermano, sin línea nueva, como si flotara en el flujo normal. Si el hermano anterior es float:right el contenedor aparecerá a la izquierda del hermano. Cambiar el tamaño de este contenedor mostrará con precisión que está centrado entre los elementos flotantes. Digamos que si tiene dos hermanos anteriores, un float:left el otro float:right , el contenedor aparecerá centrado entre los dos.

Así que aquí está el problema

¿Cómo mantengo ese tipo de diseño SIN enmascarar a los niños?

Buscar en Google en toda la web me da formas sobre cómo clear:both y expandir un contenedor … pero no puedo encontrar ninguna solución alternativa para mantener centrado el niño anterior / izquierdo. Si hace que el contenedor se overflow:visible , el contenedor ignora repentinamente el flujo de disposición de los elementos flotantes y aparece en capas sobre el elemento flotante.

Entonces pregunta :

Tengo que tener el overflow:hidden del contenedor overflow:hidden para preservar el diseño …

¿Cómo puedo hacerlo para que los niños no estén enmascarados? Necesito tener al niño absolutamente posicionado en relación con el padre fuera del contenedor.

O

¿Cómo overflow:visible para poder posicionar a un niño en relación con el padre fuera del contenedor … YET al mismo tiempo preservar el hermano float-like-layout-flow?

Puede usar el clearfix para hacer “layout preservar” del mismo modo overflow: hidden does.

 .clearfix:before, .clearfix:after { content: "."; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* IE < 8 */ 

agregue la class="clearfix" al padre y elimine overflow: hidden;

Ninguna de las respuestas publicadas funcionó para mí. position: absolute configuración position: absolute para el elemento hijo sí funcionó.

Esta es una vieja pregunta, pero la encontré yo mismo.

Tengo semi-soluciones que funcionan situacionales para la pregunta anterior (“Niños visibles en desbordamiento: padre oculto”)

Si el div principal no necesita ser position: relative, simplemente configure los estilos secundarios en visibility: visible.

Si el div principal debe estar en posición: relativo, la única forma posible que encontré para mostrar a los niños fue la posición: fijo. Esto me funcionó afortunadamente en mi situación, pero me imagino que no funcionaría en otros.

Aquí hay un ejemplo horrible que simplemente publicamos en un archivo html para ver.

 
asd
a

Para otros, si clearfix no resuelve esto para usted, agregue márgenes al hermano no flotado que es / son el mismo que el ancho (s) de los hermanos flotantes.