CSS FLOAT EXAMPLES

CSS float property-Examples

The CSS float property is used to position an element to the left or right of its container, allowing text and inline content to wrap around it.

1. Basic CSS float example

HTML

<div class="container">
  <div class="box">Float Left</div>
  <p>
    This is an example of text wrapping around a
    floated element. The text appears on the right
    side and continues below the element.
  </p>
</div>

CSS

.container {
  width: 400px;
  background: lightgray;
  padding: 10px;
}

.box {
  float: left;
  width: 120px;
  height: 100px;
  background: skyblue;
  margin: 0 10px 10px 0;
}

2.TYPES OF FLOAT 

Left

float: left;

The element moves to the left, and text wraps around its right side.

img {
  float: left;
}

Right

float: right;

The element moves to the right, and text wraps around its left side.

img {
  float: right;
}

None

float: none;

The element stays in normal document flow.

img {
  float: none;
}

3. Two boxes using float

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

.box1 {
  float: left;
  width: 150px;
  height: 100px;
  background: lightblue;
}

.box2 {
  float: right;
  width: 150px;
  height: 100px;
  background: lightcoral;
}

Output: Box 1 appears on the left, and Box 2 appears on the right.

4. Clear floats

If you want the next element to appear below the floated boxes, use clear.

.footer {
  clear: both;
}

This prevents the footer from sitting alongside either left- or right-floated elements.

Important: For modern page layouts, prefer Flexbox or Grid. Use float mainly when you want text to wrap around images or similar elements.