Image Floating

You can use CSS to float an image to the left or right of the text in HTML. To do this, you can use the float property and set it to left or right.

Here’s an example of how to float an image to the left of the text:

<div>
  <img src="example.jpg" alt="Example Image" style="float: left; margin-right: 10px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed elit ut libero ullamcorper finibus. Sed eget augue ut ex dapibus tempus.</p>
</div>

In this example, the <img> tag is wrapped in a <div> tag to group the image and text together. The float property is set to left to float the image to the left of the text, and the margin-right property is used to add a small gap between the image and text.

You can also float an image to the right by setting the float property to right, like this:

<div>
  <img src="example.jpg" alt="Example Image" style="float: right; margin-left: 10px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed elit ut libero ullamcorper finibus. Sed eget augue ut ex dapibus tempus.</p>
</div>

In this example, the float property is set to right and the margin-left property is used to add a small gap between the image and text.

Note that when you float an image, the surrounding text will wrap around it. If the image is larger than the width of its container, you may need to adjust the container’s width or use other CSS properties to control the layout.