CSS float Property

What You’ll Learn

The float property positions an element to the left or right and lets text wrap around it. It is a classic CSS layout tool that remains useful for images in articles and legacy layouts.

Introduction

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 has been widely used in web design for creating layouts, although modern techniques like Flexbox and Grid have largely replaced it for complex designs.

Definition and Usage

Apply float: left or float: right on an element such as an image, badge, or sidebar block. The floated element is taken out of normal flow, and surrounding content flows beside it on the opposite side. Use margins to add space between the float and wrapped text.

📝 Syntax

The syntax for the float property is straightforward. It can be applied to any block-level element and accepts specific keyword values:

element {
  float: value;
}

Basic Example

.float-left {
  float: left;
  margin-right: 20px;
}

Default Value

The default value of the float property is none, meaning the element does not float and behaves as a normal block-level or inline element in document flow.

Syntax Rules

• Apply on the element you want to pull left or right — commonly images, figures, or sidebars.
• Accepts keyword values: none, left, right, and inherit.
• Floated elements are removed from normal flow; siblings may wrap beside them.
• Parent containers may collapse in height unless floats are cleared.
• The property is not inherited (use inherit explicitly if needed).

💎 Property Values

Float and document flow

When an element floats, it is shifted as far left or right as possible within its containing block. Block boxes below it behave as if the float were not there, while inline content wraps around the floated box.

Examples Gallery

In this example, we’ll float an image to the left so text wraps around it — plus float right, a two-column layout, and clearing floats with a clearfix.

<style>
  .float-left {
    float: left;
    margin-right: 20px;
  }
</style>

<img src="photo.jpg" alt="Example" class="float-left">
<p>
  This paragraph wraps around the floated image on the right side.
</p>

.badge {
  float: right;
  margin-left: 16px;
}

.sidebar {
  float: left;
  width: 30%;
}
.main {
  float: left;
  width: 70%;
}

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

♿ Accessibility

• Keep meaningful alt text on floated images so screen reader users understand the content.
• Do not rely on float order alone for reading sequence — DOM order should match the intended narrative.
• Ensure sufficient spacing between floated elements and text for readability and touch targets.
• Test zoomed layouts — narrow floated columns can become hard to read on small screens.
• Prefer semantic HTML like figure and aside when floating media or side content.

💡 Best Practices