Ako zrušiť obtekanie textu okolo obrázka?

Ak chcete zrušiť obtekanie obrázka textom, ktoré bolo aplikované pomocou CSS vlastnosti float, môžete použiť nasledujúce metódy:

1. Vlastnosť clear: Používa sa na prvku nasledujúcom po obtekajúcom prvku. Nastavuje, na ktorej strane je zakázané umiestňovať obtekajúce prvky.

   • clear: left; - zruší obtekanie zľava.
   • clear: right; - zruší obtekanie sprava.
   • clear: both; - zruší obtekanie z oboch strán.

   Napríklad:

   <img src="image.jpg" style="float: left;">
   <p>Tento text bude obtekal obrázok.</p>
   <div style="clear: both;"></div> <!-- Tento prvok zruší obtekanie -->
   

   /* Alternatívne v CSS */
   .clearing-element {
     clear: both;
   }
   

   Použitie clear: both; na prvku po obtekajúcom obrázku zabezpečí, že tento prvok aj všetky nasledujúce začnú pod obtekajúcim obrázkom.

2. Vlastnosť overflow: Používa sa na rodičovskom kontajneri, ktorý obsahuje ako obtekajúci obrázok, tak aj obtekajúci text.

   • overflow: hidden;
   • overflow: auto;

   Tieto hodnoty vytvárajú nový blokový kontext formátovania (BFC), ktorý "obsahuje" plávajúce prvky vo vnútri rodiča.

   Napríklad:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Tento text bude obtekal obrázok.</p>
   </div>
   

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

   Tento spôsob je čistejší, pretože nevyžaduje pridanie ďalšieho prvku na vyčistenie.

3. Použitie display: block; na obrázku a použitie margin: Ak nechcete, aby sa obrázok obtekal od začiatku, jednoducho nepoužívajte float. Použite display: block; a margin na umiestnenie.

   img {
     display: block; /* Obrázok bude mať celú šírku podľa predvoleného nastavenia */
     margin-bottom: 20px; /* Odstup od spodku pre text */
   }
   

Výber metódy závisí od konkrétnej situácie a požadovaného správania. clear je najuniverzálnejší na zrušenie obtekania po určitom prvku, zatiaľ čo overflow je vhodný na vytváranie samočistiacich sa kontajnerov.