How to cancel image text wrapping?

To cancel text wrapping around an image applied via the CSS float property, you can use the following methods:

1. clear property: Applied to the element following the wrapped element. It sets which side should not have floating elements.

   • clear: left; - cancels wrapping on the left.
   • clear: right; - cancels wrapping on the right.
   • clear: both; - cancels wrapping on both sides.

   For example:

   <img src="image.jpg" style="float: left;">
   <p>This text will wrap around the image.</p>
   <div style="clear: both;"></div> <!-- This element cancels wrapping -->
   

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

   Applying clear: both; to the element after the floating image ensures that this element and all subsequent elements start below the floating image.

2. overflow property: Applied to the parent container that contains both the floating image and the text.

   • overflow: hidden;
   • overflow: auto;

   These values create a new Block Formatting Context (BFC), which "contains" floating elements inside the parent.

   For example:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>This text will wrap around the image.</p>
   </div>
   

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

   This method is cleaner as it does not require adding an extra element for clearing.

3. Applying display: block; to the image and using margin: If you do not want the image to be wrapped initially, simply do not apply float. Use display: block; and margin for positioning.

   img {
     display: block; /* The image will take the full width by default */
     margin-bottom: 20px; /* Bottom margin for text */
   }
   

The choice of method depends on the specific situation and the desired behavior. clear is the most versatile for canceling wrapping after a certain element, while overflow is good for creating self-clearing containers.