CSS Float

The float property allows elements (like images or boxes) to move to the left or right of their container, allowing surrounding content (like text) to wrap around them — just like how text wraps around images in Microsoft Word.

Without Float

When no float is applied, the image stays in its natural block position, and text appears below it.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    img {
      width: 150px;
      height: auto;
    }
  </style>
</head>
<body>

  <h3>Image without Float</h3>
  <img decoding="async" src="Image.jpg" alt="Sample Image">
  <p>This paragraph appears below the image because no float is applied. The image takes up the full width of its line, pushing the text underneath.</p>

</body>
</html>

Float Right

When we apply float: right, the image moves to the right, and the text wraps around it on the left side.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .float-right {
      float: right;
      margin-left: 15px;
      width: 150px;
      height: auto;
    }
  </style>
</head>
<body>

  <h3>Float Right</h3>
  <img decoding="async" class="float-right" src="Image.jpg" alt="Floating Image">
  <p>This image is floated to the right. The text flows on the left side, wrapping nicely around the image. This is helpful for articles, blogs, or product descriptions.</p>

</body>
</html>

Float Left

Similarly, you can float the image to the left, and text will wrap around it on the right side.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .float-left {
      float: left;
      margin-right: 15px;
      width: 150px;
      height: auto;
    }
  </style>
</head>
<body>

  <h3>Float Left</h3>
  <img decoding="async" class="float-left" src="Image.jpg" alt="Floating Image">
  <p>This image is floated to the left. Text now wraps on the right side. You often see this style in magazines, news layouts, and blogs.</p>

</body>
</html>

Clearing Float

Sometimes, floated elements can break the layout of other elements. Use clear to prevent overlap or layout issues.

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .float-right {
      float: right;
      width: 150px;
      margin-left: 10px;
    }
    .clearfix {
      clear: both;
    }
  </style>
</head>
<body>

  <h3>Float with Clearfix</h3>
  <img decoding="async" class="float-right" src="Image.jpg" alt="Floating Image">
  <p>This text wraps around the floated image.</p>

  <div class="clearfix"></div>

  <p>This paragraph appears below the floated image because we cleared the float using the 'clear' property.</p>

</body>
</html>