Jak zrušit obtékání textu kolem obrázku?

Chcete-li zrušit tok textu kolem obrázku aplikovaného pomocí vlastnosti CSS float, můžete použít následující metody:

1. Vlastnost clear: Tato se aplikuje na prvek následující po obrázku. Určuje, na které straně je zakázáno umisťovat plovoucí prvky.

   • clear: left; - zruší tok vlevo.
   • clear: right; - zruší tok vpravo.
   • clear: both; - zruší tok na obou stranách.

   Příklad:

   <img src="image.jpg" style="float: left;">
   <p>Tento text obklopí obrázek.</p>
   <div style="clear: both;"></div> <!-- Tento prvek zruší tok --></p>
   

   /* Alternativně v CSS */
   .clearing-element {
     clear: both;
   }
   

   Použití clear: both; na prvek po plovoucím obrázku zajistí, že tento a všechny následující začnou pod obrázkem.

2. Vlastnost overflow: Tato se aplikuje na rodičovský kontejner, který obsahuje jak plovoucí obrázek, tak text.

   • overflow: hidden;
   • overflow: auto;

   Tyto hodnoty vytvářejí nový kontext formátování bloku (BFC), který "obsahuje" plovoucí prvky uvnitř rodiče.

   Příklad:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Tento text obklopí obrázek.</p>
   </div>
   

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

   Tento způsob je čistší, protože nevyžaduje přidání dalšího prvku pro čištění.

3. Použití display: block; na obrázek a použití margin: Pokud nechcete, aby se obrázek od začátku obtékal, jednoduše nepoužívejte float. Místo toho použijte display: block; a margin pro umístění.

   img {
     display: block; /* Obrázek bude zabírat celou šířku podle výchozího nastavení */
     margin-bottom: 20px; /* Spodní okraj pro text */
   }
   

Volba metody závisí na konkrétní situaci a požadovaném chování. clear je nejuniverzálnější pro zrušení toku po určitém prvku, zatímco overflow je užitečné pro vytváření samočisticích kontejnerů.