CSS: questão de layout básico - mantendo elementos aninhados uns dentro dos outros

Question

Eu continuo achando que se eu tiver divs aninhados uns dentro dos outros, e um dos internos é lançada, o exterior não vai expandir em torno dele.

Exemplo:

<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>

O que eu preciso fazer para o div externa para torná-lo cobrir o interior? IE:? Coloque-o de fronteira / cor do fundo a toda a volta it

Além disso, existe um princípio geral estou esbarrando aqui? Se assim for, o que devo procurar para obter uma sólida compreensão do que é?

Obrigado!

Editar

Hi All,

Obrigado pelas respostas, semanticamente corretas e há, e para as ligações.

Embora eu vai acabar usando estouro no trabalho final, vou deixar a resposta de Ant P como aceite, já que foi o primeiro que realmente funcionou, e me tirou de uma enrascada curto prazo, mesmo que ofende a sensibilidade semânticos .

Como um longo tempo html corte tentando passar para layouts css decentes, eu posso certamente entender e simpatizar com, usando corte semanticamente incorreta que começa o trabalho feito, embora eu tenho certeza que ele vai mudar esse hábito depois disso = o )

Answer 1

Você pode fazê-lo estritamente com CSS usando overflow: hidden

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

Answer 2

Se você é do tipo que gosta de explicações (em vez de apenas "fazer isso") aqui estão alguns excelentes artigos que explicam vários métodos:

Clearing simples de carros alegóricos

Como Limpar flutua Sem estrutural Markup

Clearing flutua

Answer 3

é simplesmente estarrecedor quantas vezes este é o problema de base para algumas das perguntas CSS no SO. O que é ainda mais surpreendentes é quantas vezes alguém dá uma resposta como Ant P da. Embora tecnicamente correto, ele é completamente semanticamente incorreta. Themis é absolutamente certo. Basta adicionar overflow:hidden para o pai das divs flutuou. Às vezes, para se dar bem com o IE você pode ter que especificar uma largura ou altura. Isso é realmente tudo o que existe para ela.

Answer 4

Se você apenas flutuar a div externa, ele irá se expandir para conter a div aninhada. Combinando elementos flutuavam e unfloated no layout geralmente é problemático.

Answer 5

Eu não posso bater as respostas que foram postadas, mas eu tenho uma boa dica para ajudar a diagnosticar problemas de layout sem estragar a sua marcação.

Adicione esta seção para a parte inferior do seu arquivo CSS e mantê-lo comentado quando você não precisa dele:

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;
}

Muitas vezes eu vou achar que um layout que realmente funciona (especialmente uma que usa o "adicionar um <br> com um estilo clear: both) realmente não será nidificação <div> é adequadamente mas alguém tem mexido o CSS para que ele funcione por voodoo. Na verdade, olhando para as fronteiras de seus elementos ajuda muito e fazendo isso em CSS significa que você não tem que tocar a sua marcação real ou o seu CSS principal, a fim de transformar as fronteiras em para depuração.

Answer 6

Este artigo sobre sistemas CSS é definitivamente vale a pena ler. Como Darko Z disse que é impressionante para ver a resposta semanticamente incorreta dada por Ant P.