CSS Float

The float property in CSS is used to position an element to the left or right within its container, allowing text and inline elements to wrap around it. This property is commonly used for creating layouts, such as sidebars or image alignments.

Syntax

selector {
  float: value;
}

Try It Now

Values

left: The element is floated to the left of its container.
```
img {
  float: left;
}
```
Try It Now
right: The element is floated to the right of its container.
```
img {
  float: right;
}
```
Try It Now
none: This is the default value. The element is not floated.
```
div {
  float: none;
}
```
Try It Now

inherit: The element inherits the float value from its parent.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS `float: inherit` Example</title>
  <style>
    .parent {
      float: left;
      width: 50%;
      background-color: #f0f0f0;
      padding: 10px;
    }

    .child {
      float: inherit;
      background-color: #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>

  <div class="parent">
    Parent Element (floated left)
    <div class="child">
      Child Element (inherits float from parent)
    </div>
  </div>

</body>
</html>

Try It Now

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS `float` Example</title>
  <style>
    .container {
      border: 1px solid #ccc;
      padding: 10px;
    }

    .float-left {
      float: left;
      width: 150px;
      margin-right: 10px;
    }

    .float-right {
      float: right;
      width: 150px;
      margin-left: 10px;
    }

    .text {
      overflow: hidden; /* Clears the float */
    }
  </style>
</head>
<body>

  <div class="container">
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" class="float-left">
    <p class="text">
      This is a paragraph of text that wraps around the floated image. The image is floated to the left, so the text flows around it on the right side. Floating elements like images are commonly used to create magazine-style layouts where text wraps around images or other floated elements.
    </p>
  </div>

  <div class="container">
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" class="float-right">
    <p class="text">
      This paragraph of text wraps around the image that is floated to the right. The text flows on the left side of the image, creating a different visual layout. Floating elements are a flexible way to control the flow of content on a web page.
    </p>
  </div>

</body>
</html>

Try It Now

Explanation

float: left: The image floats to the left, and the text wraps around it on the right side.
float: right: The image floats to the right, and the text wraps around it on the left side.
overflow: hidden: This is used to clear the float, ensuring the container correctly wraps around the floated elements.

Clearing Floats

To prevent floated elements from overlapping with subsequent elements, use the clear property:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Try It Now

Add the clearfix class to the container to clear the floats.

Use Cases

Images: Align images to the left or right of a block of text.
Layouts: Create column layouts with sidebars or multiple columns.
Text Wrapping: Control how text flows around other elements for a visually appealing design.

Limitations

Responsiveness: Floats were originally designed for text wrapping, not complex layouts. Modern layouts often use Flexbox or Grid for more control.
Clearing Floats: Clearing floats can add extra complexity to your styles, requiring additional elements or CSS rules.

By understanding and using the float property effectively, you can create layouts that are both visually appealing and functional.