Compreendendo o papel de "clear:both" em CSS

Quando uma página da web tem elementos que flutuam para a esquerda ou para a direita, ela pode fazer com que os elementos subsequentes fluam ao seu redor. Para evitar isso, o CSS fornece a propriedade "clear", que pode ser definida para um lado específico (esquerdo, direito) ou para "ambos".

Qual é o uso de "clear:both" ?

"clear:both" instrui o elemento a cair abaixo de quaisquer elementos anteriores que foram flutuados para a esquerda e para a direita. Isso permite que ele comece em uma nova linha, limpando quaisquer margens ou preenchimento que possam envolver os elementos flutuantes.

Como funciona "clear:both"?

Em um fluxo de documento normal, os elementos são empilhados verticalmente, com o conteúdo fluindo ao redor deles. No entanto, quando um elemento flutua, ele se desloca para a esquerda ou para a direita, permitindo que outro conteúdo flua abaixo dele. "clear:both" diz ao elemento atual para começar abaixo de quaisquer elementos flutuantes anteriormente em ambos os lados.

Exemplo de uso

Considere o seguinte código HTML:

Neste exemplo, o div "Left float" é flutuado para a esquerda, fazendo com que o texto "This is a Paragraph" seja contornado. A div "Limpar ambos" é então usada para limpar os lados esquerdo e direito, permitindo que o texto "Este é um novo parágrafo" apareça abaixo dele em uma nova linha.
Conclusão 
Ao definir "clear:both" em um elemento, você pode garantir que ele comece em uma nova linha abaixo de quaisquer elementos flutuantes anteriormente, garantindo um layout consistente e controlado.