CSS Floats

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>

Copy to clipboard
Copy to clipboard

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%;
}

Copy to clipboard
Copy to clipboard

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