git-test/float.html at main · Jonasabera/git-test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    /* Float the image to the right */
    img.right {
      float: right;
      width: 200px;
      margin: 10px;
      border-radius: 8px;
    }

    /* Float the image to the left */
    img.left {
      float: left;
      width: 200px;
      margin: 10px;
      border-radius: 8px;
    }

    /* Clear floats after the content */
    .clear {
      clear: both;
    }
  </style>
</head>
<body>

  <h2>CSS Float Example</h2>

  <img src="https://via.placeholder.com/200" class="right" alt="Right Image">
  <p>
    This paragraph contains an image floated to the right. Notice how the text flows and wraps
    around the image neatly. The float property is very useful for aligning images, sidebars, or boxes
    alongside text without breaking the layout.
  </p>

  <div class="clear"></div> <!-- Clears the float so next section starts below -->

  <img src="https://via.placeholder.com/200" class="left" alt="Left Image">
  <p>
    This is another example with the image floated to the left. Again, the text automatically adjusts
    and wraps around it. You can use float for building layouts, image alignment, or simple side-by-side content.
  </p>

</body>
</html>