Kuidas tühistada pildi ümber oleva teksti voog?

Kui soovite tühistada teksti voolu pildi ümber, millele on rakendatud CSS-omaduse float kaudu, saate kasutada järgmisi meetodeid:

1. clear omadus: Rakendub elemendile, mis järgneb voolavale elemendile. Määrab, millisel küljel on keelatud paigutada voolavaid elemente.

   • clear: left; - tühistab vasakpoolsed voolud.
   • clear: right; - tühistab parempoolsed voolud.
   • clear: both; - tühistab mõlemad voolud.

   Näide:

   <img src="image.jpg" style="float: left;">
   <p>See tekst voogab pildi ümber.</p>
   <div style="clear: both;"></div> <!-- See element tühistab voolu -->
   

   /* Alternatiivne CSS-is */
   .clearing-element {
     clear: both;
   }
   

   clear: both; rakendamine pärast voolavat pilti tagab, et see ja kõik järgnevad elemendid algavad pildi all.

2. overflow omadus: Rakendub vanemkonteinerile, mis sisaldab nii voolavat pilti kui ka teksti.

   • overflow: hidden;
   • overflow: auto;

   Need väärtused loovad uue vormindusblokikonteksti (BFC), mis "hoiab" sees plavavad elemendid.

   Näide:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>See tekst voogab pildi ümber.</p>
   </div>
   

   .container {
     overflow: hidden; /* või auto */
   }
   

   See meetod on puhtam, kuna ei nõua täiendava elemendi lisamist puhastamiseks.

3. display: block; rakendamine pildile ja marginaali kasutamine: Kui te ei soovi, et pilt alguses voolaks, ärge lihtsalt kasutage float. Selle asemel kasutage display: block; ja margin positsioneerimiseks.

   img {
     display: block; /* Pilt võtab kogu laiuse vaikimisi */
     margin-bottom: 20px; /* Vahe all tekstile */
   }
   

Valik sõltub konkreetsest olukorrast ja soovitud käitumisest. clear on kõige universaalsem, et tühistada vool pärast kindlat elementi, samas kui overflow sobib ise puhastuvate konteinerite loomiseks.