Como usar float para posicionar elementos e clear para encerrar o fluxo flutuante
A propriedade float foi criada originalmente para fazer imagens ficarem ao lado de texto, como em revistas e jornais. O conteúdo ao redor "flui" em volta do elemento flutuante.
Carregando...Com esse código, a imagem fica à esquerda e o texto se organiza ao lado direito dela.
Carregando...Quando todos os filhos de um elemento têm float, o elemento pai perde a altura e colapsa.
Carregando...A técnica mais comum para corrigir isso é adicionar um elemento invisível após os elementos flutuantes, usando o pseudo-elemento ::after.
Carregando...Essa técnica se chama clearfix e é encontrada em muitos projetos que usam float para layout.
A propriedade clear impede que um elemento fique ao lado de elementos flutuantes.
Carregando...Os valores são left, right e both.
Com a chegada do Flexbox e do Grid, o float perdeu espaço como ferramenta de layout. Hoje ele é usado principalmente para o caso original: imagens ao lado de texto.
Para construir colunas e estruturas de layout, os métodos modernos são bem mais adequados.