Facebook Pixel
</> CodeWithHarry

CSS Float

The float property in CSS is used to position an element to the left or right of its container, allowing other content (like text or inline elements) to wrap around it. This property is commonly used with images, sidebars, or layouts where text should flow beside a block element.

Think of it as the “wrap text” feature in MS Word — when you insert an image, you can let the text flow beside it instead of keeping the image on its own line.

Syntax

float: none | left | right | inherit;
  • none → Default value. The element will not float.
  • left → The element floats to the left side of its container.
  • right → The element floats to the right side of its container.
  • inherit → Inherits the float property from its parent element.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Float</title>
    <style>
        img {
            float: none;
        }
    </style>
</head>

<body>
    <h1>CSS Float Property</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non nam amet cupiditate! Explicabo
        sapiente, praesentium excepturi repudiandae ab unde veritatis vero accusantium quod est cum dolorem
        omnis consequatur beatae dignissimos.
        <img src="https://plus.unsplash.com/premium_photo-1757322537387-56f559230a0b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" width="250px"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
        distinctio nobis, aliquam assumenda amet molestiae rerum dolore minus! Explicabo placeat voluptas
        voluptatem libero ad in dolor debitis repudiandae quo
        consequatur?
    </p>
</body>

</html>

This is how your image looks without the float property.

Float none output

Example With Float Right

Now, if we add float: right; to the image, it shifts to the right side of the container and the text automatically wraps around it.

Float right output

Clearing Floats

Sometimes floated elements affect the layout of the following elements. To fix this, we use the clear property.

p {
    clear: both;  /* No element is allowed to float beside this paragraph */
}

Quick Recap

  • float lets elements move left or right inside their container.
  • It allows text wrapping, similar to MS Word’s wrap-through option.
  • Commonly used for images, sidebars, and layouts.
  • Always remember to use clear to prevent layout issues.
CSS OverflowCSS Positioning