elementos flutuantes e colorido de fundo CSS

em desenvolvimento da web, elementos de estilo com CSS podem ser um desafio ao encontrar cenários envolvendo elementos flutuantes. Isso pode surgir quando os elementos são removidos do fluxo normal do documento usando a propriedade 'Float', levando a problemas com as dimensões do elemento pai e cores de fundo. Atribuímos a cada div uma cor de fundo: vermelho para o pai e verde e amarelo para os elementos flutuantes.

. Conteúdo { Largura: 960px; Altura: Auto; margem: 0 automático; Antecedentes: vermelho; claro: ambos; } .esquerda { flutuar: esquerda; Altura: 300px; Antecedentes: verde; } .certo { Float: Certo; Antecedentes: amarelo; }

.content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
}

.left {
    float: left;
    height: 300px;
    background: green;
}

.right {
    float: right;
    background: yellow;
}

. Content { estouro: oculto; // ou transbordamento: automático; }

aplicando qualquer valor ao 'content' div em nosso exemplo corrigirá o problema em colapso, permitindo que os pais se expandam de acordo com o tamanho do conteúdo, expondo todo o fundo vermelho.

. Conteúdo { estouro: oculto; ... }

.content {
    overflow: hidden;  // or overflow: auto;
}