CSS Float

Written by Swapnil RajaUpdated 30 Jul 2026

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. The supporting concepts are explained in Normal Flow and Multi-column Layout.

Today, it is commonly used for:

Wrapping text around images
Simple content alignment
Legacy website maintenance

Syntax

CSS Float Syntax

css

selector {
    float: value;
}

PreviousAnchor Positioning NextCSS Overflow

img {
    float: right;
}

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;

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>

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

CSS Float

Syntax

Attributes

Example

Browser Support

Notes

Common Float Values

Conclusion