Hoe de tekstomloop rond een afbeelding op te heffen?

Om de tekststroom rond een met CSS float gepositioneerde afbeelding te annuleren, kunnen de volgende methoden worden gebruikt:

1. clear eigenschap: Wordt toegepast op het element dat volgt op de afbeelding. Bepaalt aan welke zijde het zwevende element niet mag worden geplaatst.

   • clear: left; - annuleert de stroom aan de linkerkant.
   • clear: right; - annuleert de stroom aan de rechterkant.
   • clear: both; - annuleert de stroom aan beide zijden.

   Bijvoorbeeld:

   <img src="image.jpg" style="float: left;">
   <p>Deze tekst zal de afbeelding omringen.</p>
   <div style="clear: both;"></div> <!-- Dit element annuleert de stroom --></p>
   

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

   Het toepassen van clear: both; op het element na de zwevende afbeelding zorgt ervoor dat dit en alle volgende elementen onder de afbeelding beginnen.

2. overflow eigenschap: Wordt toegepast op de oudercontainer die zowel de zwevende afbeelding als de tekst bevat.

   • overflow: hidden;
   • overflow: auto;

   Deze waarden creëren een nieuwe blokformatieruimte (BFC), die de zwevende elementen binnen de ouder "bevat".

   Bijvoorbeeld:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>Deze tekst zal de afbeelding omringen.</p>
   </div>
   

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

   Deze methode is schoner, omdat het geen extra element vereist voor het schoonmaken.

3. Toepassen van display: block; op de afbeelding en gebruik maken van margin: Als je niet wilt dat de afbeelding vanaf het begin wordt omgeven, gebruik dan geen float. Gebruik display: block; en margin voor positionering.

   img {
     display: block; /* De afbeelding neemt standaard de volledige breedte in */
     margin-bottom: 20px; /* Onder marge voor de tekst */
   }
   

De keuze van methode hangt af van de specifieke situatie en het gewenste gedrag. clear is het meest universeel om de stroom na een bepaald element te beëindigen, terwijl overflow handig is voor het maken van zelfreinigende containers.