CSS: Pregunta de diseño básica: mantener elementos anidados uno dentro del otro

Question

Sigo descubriendo que si he anidado divs uno dentro del otro, y uno de los internos está flotando, el externo no se expandirá a su alrededor.

Ejemplo:

<div style='background-color:red; '>
    asdfasdf
    <div style='float:left; background-color:blue; width:400px; height:400px;'>
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
    </div>
    asdfasdf
</div>

¿Qué necesito hacer con el div externo para que cubra el interno? IE: ¿Poner el borde / color de fondo a su alrededor?

Además, ¿hay un principio general con el que me estoy tropezando aquí? Si es así, ¿qué debo buscar para obtener una comprensión sólida de lo que es?

¡Gracias!

Editar

Hola a todos,

Gracias por las respuestas, semánticamente correctas y no, y por los enlaces.

Aunque terminaré usando el desbordamiento en el trabajo final, dejaré la respuesta de Ant P como aceptada, ya que fue la primera que realmente funcionó, y me sacó de un atasco a corto plazo, aunque ofende la sensibilidad semántica .

Como un hack html desde hace mucho tiempo que intenta pasar a diseños CSS decentes, ciertamente puedo entender y simpatizar con el uso de un truco semánticamente incorrecto que hace el trabajo, aunque estoy seguro de que cambiará ese hábito después de esto = o )

Answer 1

Puedes hacerlo estrictamente con CSS usando overflow:hidden

<div style='background-color:red;overflow:hidden;'>
...
</div>

Answer 2

Si eres del tipo al que le gustan las explicaciones (en lugar de solo " haz esto ") aquí hay algunos excelentes artículos que explican varios métodos:

Limpieza simple de flotadores

Cómo borrar flotadores sin marcado estructural

Borrado de flotadores

Answer 3

es simplemente asombroso cuántas veces este es el problema base para algunas de las preguntas de CSS en SO. Lo que es aún más asombroso es cuántas veces alguien da una respuesta como la de Ant P. Aunque técnicamente correcto, es completamente semánticamente incorrecto. Themis tiene toda la razón. Simplemente agregue overflow:hidden al padre de los divs flotantes. A veces, para que funcione bien con IE, es posible que deba especificar un ancho O una altura. Eso es realmente todo lo que hay que hacer.

Answer 4

Si solo flota el div externo, se expandirá para contener el div anidado. La combinación de elementos flotantes y no flotantes en el diseño suele ser problemática.

Answer 5

No puedo superar las respuestas que se han publicado, pero tengo un buen consejo para ayudar a diagnosticar problemas de diseño sin arruinar su marcado.

Agregue esta sección al final de su archivo CSS y manténgala comentada cuando no la necesite:

div
{
   border-width: thin !important;
   border-color: Orange !important;
   border-style: solid !important;
}

label, span, /* whatever else you might want to see */
{
   border-width: thin !important;
   border-color: Blue !important;
   border-style: solid !important;
}

A menudo encontraré que un diseño que realmente funciona (particularmente uno que usa el " agregue un <br> con un estilo clear: both) en realidad no estará anidando correctamente los <div> sino alguien ha ajustado el CSS para que funcione con vudú. En realidad, mirar los bordes de sus elementos ayuda mucho y hacer esto en CSS significa que no tiene que tocar su marcado real o su CSS principal para activar los bordes para la depuración.

Answer 6

Este artículo sobre sistemas CSS definitivamente vale la pena leerlo. Como dijo Darko Z, es asombroso ver la respuesta semánticamente incorrecta dada por Ant P.