HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS float Example</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 1.5rem;
      line-height: 1.6;
      max-width: 40rem;
    }

    .float-left {
      float: left;
      width: 120px;
      height: 120px;
      margin-right: 20px;
      margin-bottom: 10px;
      background: linear-gradient(135deg, #60a5fa, #2563eb);
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
    }

    .article::after {
      content: "";
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <h1>Float Property Example</h1>
  <article class="article">
    <div class="float-left" role="img" aria-label="Example photo placeholder">Photo</div>
    <p>
      This is a paragraph of text that will wrap around the floated image. The float property is useful for creating simple layouts where elements need to be aligned to the left or right within their container. By floating the image to the left, the surrounding text flows naturally to the right of the image, creating a visually appealing arrangement.
    </p>
    <p>
      Add a second paragraph to see how text continues below the image once it runs out of horizontal space beside the float.
    </p>
  </article>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS float Property - Float Image Left