Hogyan szüntetjük meg a szöveg körüli kép körüli szövegáramlást?

A CSS float segítségével alkalmazott kép körüli szövegáramlás törléséhez a következő módszereket használhatja:

1. clear tulajdonság: Ez az elemre vonatkozik, amely a kép után következik. Meghatározza, hogy melyik oldalon tilos az úszó elemek elhelyezése.

   • clear: left; - a bal oldali áramlást törli.
   • clear: right; - a jobb oldali áramlást törli.
   • clear: both; - mindkét oldali áramlást törli.

   Példa:

   <img src="image.jpg" style="float: left;">
   <p>Ez a szöveg körülveszi a képet.</p>
   <div style="clear: both;"></div> <!-- Ez az elem törli az áramlást --></p>
   

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

   A clear: both; alkalmazása a lebegő kép utáni elemre biztosítja, hogy ez és minden következő elem a kép alatt kezdődjön.

2. overflow tulajdonság: Ez a szülőkonténerre vonatkozik, amely tartalmazza mind a lebegő képet, mind a szöveget.

   • overflow: hidden;
   • overflow: auto;

   Ezek az értékek egy új blokkformázási kontextust (BFC) hoznak létre, amely "befogja" a lebegő elemeket a szülőn belül.

   Példa:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Ez a szöveg körülveszi a képet.</p>
   </div>
   

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

   Ez a módszer tisztább, mivel nem igényel további elemet a tisztításhoz.

3. display: block; alkalmazása a képre és margin használata: Ha nem akarja, hogy a kép eleve lebegjen, egyszerűen ne alkalmazza a float-ot. Használjon display: block;-ot és margin-t a pozícionáláshoz.

   img {
     display: block; /* A kép alapértelmezés szerint az összes szélességet elfoglalja */
     margin-bottom: 20px; /* Alsó margó a szöveghez */
   }
   

A módszer kiválasztása a konkrét helyzettől és a kívánt viselkedéstől függ. A clear a leguniverzálisabb a bizonyos elem utáni áramlás megszüntetésére, míg az overflow hasznos az öntisztító konténerek létrehozásához.