Floats

Published Mar 24, 2022Updated Oct 31, 2022
Contribute to Docs

The float property moves an element to the left or right within its containing element, outside of the default positioning.

Syntax

.item_x {
  float: none;
}

.item_y {
  float: left;
}

.item_z {
  float: right;
}

The float property primarily uses the following three values:

  • The left value that makes the element float on the left of its container.
  • The right value that makes the element float on the right of its container.
  • The none value that causes the element not to float.

Example

<section>
<div class="item_1">
<p>This is the first item and I will float left.</p>
</div>
<div class="item_2">
<p>This is the second item and I will float right.</p>
</div>
<br />
<br />
<br />
<p>This example shows CSS floats and I will not float at all.</p>
</section>

In the above snippet, the elements with the class item_1 and item_2 can be set to float in an external style sheet.

.item_1 {
float: left;
}
.item_2 {
float: right;
}
div {
border: thick double black;
}
section > p {
margin: auto;
text-align: center;
width: 50%;
}

The <div> tags with the .item_1 and .item_2 classes will float to the left and right of the “CSS floats” text, respectively.

Image of rendered float elements

All contributors

Looking to contribute?

Learn CSS on Codecademy