Jak anulować zawijanie tekstu wokół obrazu?

Aby anulować zawijanie tekstu wokół obrazu zastosowanego za pomocą właściwości CSS float, można użyć następujących metod:

1. Właściwość clear: Dotyczy elementu następującego po obrazie. Ustawia, po której stronie zabronione jest umieszczanie elementów pływających.

   • clear: left; - anuluje zawijanie po lewej stronie.
   • clear: right; - anuluje zawijanie po prawej stronie.
   • clear: both; - anuluje zawijanie z obu stron.

   Na przykład:

   <img src="image.jpg" style="float: left;">
   <p>Ten tekst będzie otaczał obraz.</p>
   <div style="clear: both;"></div> <!-- Ten element anuluje zawijanie --></p>
   

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

   Użycie clear: both; na elemencie po pływającym obrazie gwarantuje, że ten i wszystkie kolejne elementy zaczną się poniżej obrazu.

2. Właściwość overflow: Dotyczy rodzica, który zawiera zarówno pływający obraz, jak i tekst.

   • overflow: hidden;
   • overflow: auto;

   Te wartości tworzą nowy kontekst formatowania bloku (BFC), który "zawiera" elementy pływające wewnątrz rodzica.

   Na przykład:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Ten tekst będzie otaczał obraz.</p>
   </div>
   

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

   Ta metoda jest bardziej czysta, ponieważ nie wymaga dodawania dodatkowego elementu do czyszczenia.

3. Użycie display: block; na obrazku i margin: Jeśli nie chcesz, aby obraz był pływający od początku, po prostu nie stosuj float. Użyj display: block; i margin do pozycjonowania.

   img {
     display: block; /* Obraz zajmie całą szerokość domyślnie */
     margin-bottom: 20px; /* Odstęp od dołu dla tekstu */
   }
   

Wybór metody zależy od konkretnej sytuacji i pożądanego zachowania. clear jest najbardziej uniwersalny do anulowania zawijania po określonym elemencie, a overflow jest przydatny do tworzenia samoczyszczących się kontenerów.