CSS float Property

Definition and Usage

The float property places an element on the left or right of its container so following text and inline content can wrap around it.

Floated elements leave normal flow for placement, but text still wraps beside them. For page grids, prefer Flexbox or Grid. Use float mainly for wrapping text around images — and use clear or display: flow-root when you need to contain floats.

CSS Syntax

The initial value is none. The property is not inherited.

Property Values

How to Use float

Float a sized box, then let following text wrap beside it.

1. Give the element a width (floated boxes often need an explicit size).
2. Set float: left or float: right.
3. Place text or other content after the floated element in the HTML.
4. If a following block must start below the float, use clear. If a parent collapses, use display: flow-root on the parent.

Live Preview

Change only float on the blue box. The paragraph wraps beside it when floated.

CSS Examples

Each snippet focuses on float. Width is only there so the floated box has a clear size. Use Try It Yourself for a live editor.

<style>
  .box {
    float: left;
    width: 80px;
    height: 80px;
    margin: 0 12px 8px 0;
    background: #93c5fd;
    text-align: center;
    line-height: 80px;
  }
</style>

<div class="box">Left</div>
<p>Text wraps on the right of a left-floated box.</p>

<style>
  .box {
    float: right;
    width: 80px;
    height: 80px;
    margin: 0 0 8px 12px;
    background: #fcd34d;
    text-align: center;
    line-height: 80px;
  }
</style>

<div class="box">Right</div>
<p>Text wraps on the left of a right-floated box.</p>

<style>
  .box {
    float: none;
    width: 80px;
    height: 80px;
    background: #93c5fd;
    text-align: center;
    line-height: 80px;
  }
</style>

<div class="box">None</div>
<p>With float: none, the box is a normal block above the text.</p>

Key Takeaways