Como cancelar o ajuste de texto à volta da imagem?

Para cancelar o fluxo de texto ao redor de uma imagem aplicado através da propriedade CSS float, pode usar os seguintes métodos:

1. Propriedade clear: Aplica-se ao elemento seguinte à imagem. Define de que lado é proibido que os elementos flutuantes estejam.

   • clear: left; - cancela o fluxo à esquerda.
   • clear: right; - cancela o fluxo à direita.
   • clear: both; - cancela o fluxo de ambos os lados.

   Por exemplo:

   <img src="image.jpg" style="float: left;">
   <p>Este texto envolverá a imagem.</p>
   <div style="clear: both;"></div> <!-- Este elemento cancelará o fluxo -->
   

   /* Alternativamente em CSS */
   .clearing-element {
     clear: both;
   }
   

   Aplicar clear: both; ao elemento após a imagem flutuante garante que esse elemento e todos os seguintes comecem abaixo da imagem flutuante.

2. Propriedade overflow: Aplica-se ao contêiner pai que contém tanto a imagem flutuante quanto o texto.

   • overflow: hidden;
   • overflow: auto;

   Estes valores criam um novo contexto de formatação de bloco (BFC), que "contém" os elementos flutuantes dentro do pai.

   Por exemplo:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Este texto envolverá a imagem.</p>
   </div>
   

   .container {
     overflow: hidden; /* Ou auto */
   }
   

   Este método é mais limpo, pois não requer a adição de um elemento adicional para limpeza.

3. Aplicar display: block; à imagem e usar margin: Se não desejar que a imagem seja flutuante desde o início, simplesmente não aplique float. Use display: block; e margin para posicionar.

   img {
     display: block; /* A imagem ocupará toda a largura por padrão */
     margin-bottom: 20px; /* Margem inferior para o texto */
   }
   

A escolha do método depende da situação específica e do comportamento desejado. clear é mais universal para cancelar o fluxo após um elemento específico, enquanto overflow é útil para criar contêineres que se limpam a si mesmos.