CSS Layout

CSS Float

The CSS Float property is used to position an element to the left or right side of its container, allowing surrounding content to wrap around it.

Float was traditionally used for creating page layouts before Flexbox and Grid became popular.

Today, it is commonly used for:

Wrapping text around images
Simple content alignment
Legacy website maintenance

Syntax

CSS Float Syntax

css

selector {
    float: value;
}

CSS Float Example

css

img {
    float: right;
}

This places the <img> on the right side and allows text to wrap around it.

Attributes

Value	Description	Example
left	Floats the element to the left	float: left;
right	Floats the element to the right	float: right;
none	Default value, no floating	float: none;
inherit	Inherits float value from parent	float: inherit;
clear	Stops floating behavior	clear: both;

Example

CSS Float Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Float Example</title>
    <style>
        img {
            float: left;
            margin-right: 15px;
        }
        .clear-box {
            clear: both;
            background-color: lightgray;
            padding: 10px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Sample Image" width="150">
    <p>
        This text wraps around the floated image. The image is positioned
        on the left side, and the paragraph content flows around it.
        This behavior is commonly used in articles and blogs.
    </p>
    <div class="clear-box">
        This content appears below the floated element because of clear: both.
    </div>
</body>
</html>

Output

Browser Output

css

The image will appear on the left side
The paragraph text will wrap around the image
The gray box will appear below the image and paragraph because it uses clear: both

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Notes

Floated elements are removed from the normal document flow.
Text and inline content can wrap around floated elements.
Use clear to prevent elements from wrapping around floats.
Modern layouts generally use Flexbox and CSS Grid.
Float is still useful for wrapping text around images.

Common Float Values

Value	Result
left	Element moves to the left
right	Element moves to the right
none	Default positioning
clear: left	Clears left floats
clear: right	Clears right floats
clear: both	Clears all floats

Conclusion

The CSS Float property allows elements to be positioned on the left or right side of a container while letting surrounding content flow around them. Although modern layouts now rely on Flexbox and Grid, understanding float remains important for text wrapping and maintaining older websites.

PreviousCSS Position NextCSS Overflow