Come annullare il testo che avvolge l'immagine?

Per annullare il flusso di testo attorno a un'immagine applicato tramite la proprietà CSS float, è possibile utilizzare i seguenti metodi:

1. Proprietà clear: Si applica all'elemento che segue l'immagine. Imposta da quale lato è vietato che gli elementi fluttuanti siano posizionati.

   • clear: left; - annulla il flusso a sinistra.
   • clear: right; - annulla il flusso a destra.
   • clear: both; - annulla il flusso su entrambi i lati.

   Per esempio:

   <img src="image.jpg" style="float: left;">
   <p>Questo testo circonderà l'immagine.</p>
   <div style="clear: both;"></div> <!-- Questo elemento annullerà il flusso --></p>
   

   /* In alternativa in CSS */
   .clearing-element {
     clear: both;
   }
   

   Applicare clear: both; all'elemento dopo l'immagine flottante garantisce che tale elemento e tutti i successivi inizino sotto l'immagine.

2. Proprietà overflow: Si applica al contenitore padre che contiene sia l'immagine flottante che il testo.

   • overflow: hidden;
   • overflow: auto;

   Questi valori creano un nuovo contesto di formattazione di blocco (BFC), che "contiene" gli elementi fluttuanti all'interno del genitore.

   Per esempio:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Questo testo circonderà l'immagine.</p>
   </div>
   

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

   Questo metodo è più pulito, poiché non richiede l'aggiunta di un elemento supplementare per la pulizia.

3. Applicare display: block; all'immagine e usare margin: Se non si desidera che l'immagine venga fluttuata fin dall'inizio, basta non applicare float. Usare display: block; e margin per il posizionamento.

   img {
     display: block; /* L'immagine occuperà tutta la larghezza di default */
     margin-bottom: 20px; /* Margine inferiore per il testo */
   }
   

La scelta del metodo dipende dalla situazione specifica e dal comportamento desiderato. clear è più universale per annullare il flusso dopo un elemento specifico, mentre overflow è utile per creare contenitori auto-pulenti.