Cum se anulează înfășurarea textului în jurul imaginii?

Pentru a anula fluxul de text în jurul unei imagini aplicat prin proprietatea CSS float, se pot folosi următoarele metode:

1. Proprietatea clear: Se aplică elementului care urmează după imagine. Stabilește pe ce parte este interzis să fie plasate elemente flotante.

   • clear: left; - anulează fluxul pe partea stângă.
   • clear: right; - anulează fluxul pe partea dreaptă.
   • clear: both; - anulează fluxul pe ambele părți.

   De exemplu:

   <img src="image.jpg" style="float: left;">
   <p>Acest text va înconjura imaginea.</p>
   <div style="clear: both;"></div> <!-- Acest element va anula fluxul --></p>
   

   /* Alternativ în CSS */
   .clearing-element {
     clear: both;
   }
   

   Aplicarea clear: both; pe elementul după imaginea flotantă garantează că acest element și toate următoarele vor începe sub imagine.

2. Proprietatea overflow: Se aplică containerului părinte care conține atât imaginea flotantă, cât și textul.

   • overflow: hidden;
   • overflow: auto;

   Aceste valori creează un nou context de formatare a blocului (BFC), care "conține" elementele flotante din interiorul părintelui.

   De exemplu:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Acest text va înconjura imaginea.</p>
   </div>
   

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

   Acest metod este mai curat, deoarece nu necesită adăugarea unui element suplimentar pentru curățare.

3. Aplicarea display: block; la imagine și utilizarea margin: Dacă nu doriți ca imaginea să fie flotantă de la început, pur și simplu nu aplicați float. Folosiți display: block; și margin pentru poziționare.

   img {
     display: block; /* Imaginea va ocupa întreaga lățime implicit */
     margin-bottom: 20px; /* Spațiu inferior pentru text */
   }
   

Alegerea metodei depinde de situația specifică și de comportamentul dorit. clear este cel mai universal pentru a anula fluxul după un anumit element, în timp ce overflow este util pentru crearea de containere care se curăță singure.