Mystery of Float Not Resizing Div

Ao usar CSS float, a suposição é que os elementos subsequentes serão alinhados à esquerda em vez de fluir para um novo linha. No entanto, em alguns cenários, como o exemplo fornecido, o div seguinte continua a abranger toda a largura em vez de começar à direita do primeiro div.

Para entender esse comportamento, nos aprofundamos nas complexidades de float posicionamento. Quando um elemento é flutuado (neste caso, a div .inline), o conteúdo abaixo dele se alinha com o lado direito desse elemento. No entanto, a largura do bloco que contém estabelecida pelo elemento subsequente (o div .yellow) ainda é preservada.

Este comportamento é descrito na especificação CSS: caixas de bloco não posicionadas fluem verticalmente como se o float não o fizesse existir. No entanto, as caixas de linha próximas ao float são encurtadas para acomodar a caixa de margem do float.

Portanto, se um elemento de nível de bloco (como .yellow div) tiver um plano de fundo, ele se estenderá através do elemento flutuante.

A Resolução

De acordo com CSS nível 2.1, elementos com determinadas propriedades (substituições em nível de bloco, elementos que estabelecem um novo contexto de formatação de bloco) não devem se sobrepor à caixa de margem de quaisquer carros alegóricos no mesmo contexto. Adicionar uma propriedade "overflow" diferente de "visible" ao div .yellow evita que ele se sobreponha ao elemento flutuante.

Quando a sobreposição pode ser útil

É importante observe que a sobreposição pode ser benéfica em situações em que o conteúdo após o elemento flutuante é longo o suficiente para continuar normalmente. Restringir o conteúdo por padrão pode fazer com que ele não flua sob o elemento flutuante.