Kā atcelt teksta apviju ap attēla?

Lai atceltu teksta plūsmu ap vaizdu, kas tika piemērots ar CSS īpašumu float, jūs varat izmantot šādus metodes:

1. clear īpašība: Tiek piemērota elementam, kas seko plūstošajam elementam. Tā nosaka, kurā pusē ir aizliegts novietot plūstošos elementus.

   • clear: left; - atceļ plūsmu no kreisās puses.
   • clear: right; - atceļ plūsmu no labās puses.
   • clear: both; - atceļ plūsmu no abām pusēm.

   Piemērs:

   <img src="image.jpg" style="float: left;">
   <p>Šis teksts apvij attēlu.</p>
   <div style="clear: both;"></div> <!-- Šis elements atcels plūsmu -->
   

   /* Alternatīvi CSS */
   .clearing-element {
     clear: both;
   }
   

   clear: both; piemērošana pēc plūstoša attēla nodrošina, ka šis un visi turpmākie elementi sāksies zem attēla.

2. overflow īpašība: Tiek piemērota vecāka konteinerim, kas satur gan plūstošo attēlu, gan tekstu.

   • overflow: hidden;
   • overflow: auto;

   Šīs vērtības rada jaunu formatēšanas bloka kontekstu (BFC), kas "iekļauj" iekšējos plūstošos elementus.

   Piemērs:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Šis teksts apvij attēlu.</p>
   </div>
   

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

   Šī metode ir tīrāka, jo neprasa papildus elementa pievienošanu tīrīšanai.

3. display: block; piemērošana attēlam un margin izmantošana: Ja nevēlaties, lai attēls sākumā plūst, vienkārši nelietojiet float. Tā vietā izmantojiet display: block; un margin pozicionēšanai.

   img {
     display: block; /* Attēls aizņems visu platumu pēc noklusējuma */
     margin-bottom: 20px; /* Attālums apakšā tekstam */
   }
   

Izvēle ir atkarīga no konkrētās situācijas un vēlamās uzvedības. clear ir vispārīgākais, lai atceltu plūsmu pēc noteikta elementa, bet overflow ir labs, lai izveidotu pašattīrošus konteinerus.