CSS Float - Detailed Overview

Introduction to CSS Float

The CSS float property is used for positioning and formatting content, e.g., allowing text to wrap around an image. Elements with float are taken out of the normal flow of the document and are aligned to the left or right of their container.

Float Left

Using float: left; positions the element to the left of its container:

.float-left {
    float: left;
    width: 150px;
    height: 100px;
    background-color: #f0d0d0;
    margin-right: 10px;
}

This box floats left.

This paragraph wraps around the floating box. It continues on the right side of the floated element.

Float Right

Using float: right; positions the element to the right of its container:

.float-right {
    float: right;
    width: 150px;
    height: 100px;
    background-color: #d0f0f0;
    margin-left: 10px;
}

This box floats right.

This paragraph wraps around the floating box. It continues on the left side of the floated element.

Clearing Floats

To clear floats and prevent elements from wrapping around floated elements, use the clear property:

.clear {
    clear: both;
}

Floated left box.

Floated right box.

This paragraph is cleared and appears below the floated boxes.