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

En CSS, overflow:hiddense establece en 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 el hermano PREVIOUS es un elemento flotante, aparecerá yuxtapuesto a él. Es decir, si el hermano es, float:leftentonces el contenedor con float:none overflow:hiddenaparecerá a la derecha del hermano, sin nueva línea, como si estuviera flotando en el flujo normal. Si el hermano anterior es, float:rightentonces el contenedor aparecerá a la izquierda del hermano. Cambiar el tamaño de este contenedor lo mostrará con precisión centrado entre los elementos flotantes. Digamos que si tiene dos hermanos anteriores, uno float:leftel 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 de cómo clear:bothexpandir un contenedor ... pero no puedo encontrar ninguna solución alternativa para mantener el centrado del niño anterior izquierdo / derecho. Si crea el contenedor overflow:visible, el contenedor ignora repentinamente el flujo de diseño de los elementos flotantes y aparece en capas encima del elemento flotante.

Entonces pregunta :

Tengo que tener el contenedor overflow:hiddenpara preservar el diseño ...

¿Cómo puedo hacer 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:visiblepuedo posicionar absolutamente a un niño en relación con el padre fuera del contenedor ... SIN EMBARGO, preservar el flujo de diseño tipo flotador hermano?

Puede utilizar la función clearfixpara "preservar el diseño" de la misma forma que lo overflow: hiddenhace.

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

agregar class="clearfix"clase al padre y eliminaroverflow: hidden;

Ninguna de las respuestas publicadas funcionó para mí. position: absoluteSin embargo, la configuración del elemento hijo funcionó.

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

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

Si el div padre no necesita ser posición: relativo, simplemente establezca los estilos secundarios en visibilidad: visible.

Si el div padre necesita ser posición: relativa, la única forma posible que encontré para mostrar a los hijos fue posición: fija. Afortunadamente, esto funcionó para mí en mi situación, pero me imagino que no funcionaría en otras.

Aquí hay un ejemplo de mierda que simplemente publique en un archivo html para verlo.

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

Para otros, si clearfix no resuelve esto por usted, agregue márgenes al hermano no flotante que sea el mismo que el ancho (s) de los hermanos flotantes.