Kaip atšaukti teksto apvyniojimą aplink vaizdą?

Norėdami panaikinti teksto srautą aplink vaizdą, taikytą naudojant CSS savybę float, galite naudoti šiuos metodus:

1. clear savybė: Taikoma elementui, sekiančiam po teksto srauto elementu. Nustato, kuriame šone draudžiama dėti teksto srautą turinčius elementus.

   • clear: left; - panaikina kairįjį srautą.
   • clear: right; - panaikina dešinįjį srautą.
   • clear: both; - panaikina abiejų pusių srautą.

   Pavyzdys:

   <img src="image.jpg" style="float: left;">
   <p>Šis tekstas apgaubs vaizdą.</p>
   <div style="clear: both;"></div> <!-- Šis elementas panaikins srautą -->
   

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

   clear: both; taikymas po plaukiančio vaizdo užtikrina, kad šis ir visi vėlesni elementai prasidės žemiau vaizdo.

2. overflow savybė: Taikoma tėviniam konteineriui, kuris apima tiek plaukiančią vaizdą, tiek teksto srautą.

   • overflow: hidden;
   • overflow: auto;

   Šios reikšmės sukuria naują formatavimo blokinį kontekstą (BFC), kuris "saugo" plaukiančius elementus viduje tėvo.

   Pavyzdys:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Šis tekstas apgaubs vaizdą.</p>
   </div>
   

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

   Šis metodas yra švaresnis, nes nereikalauja papildomo elemento valymui.

3. display: block; taikymas vaizdui ir margin naudojimas: Jei nenorite, kad vaizdas iš pradžių tekėtų, paprasčiausiai nenaudokite float. Vietoj to naudokite display: block; ir margin pozicionavimui.

   img {
     display: block; /* Vaizdas užims visą plotį pagal numatytuosius nustatymus */
     margin-bottom: 20px; /* Apačioje tarpas tekstui */
   }
   

Pasirinkimas priklauso nuo konkrečios situacijos ir norimo elgesio. clear yra universaliausias, kadangi jis gali panaikinti srautą po tam tikro elemento, o overflow yra naudingas kuriant savisvalančius konteinerius.