CSS Float and Clear

The CSS float property moves an element to the left or right side of its container. Other content, such as text, can then wrap around it.

The clear property controls whether an element can appear beside a floated element.

The float Property

The most common float values are:

• left – moves the element to the left
• right – moves the element to the right
• none – prevents floating; this is the default value
• inline-start – floats toward the beginning of the writing direction
• inline-end – floats toward the end of the writing direction

.image {
  float: left;
  margin-right: 15px;
}

In this example, the image moves to the left, and the nearby text wraps around its right side.

Floating an Element to the Right

Use float: right to move an element to the right side:

.profile-image {
  float: right;
  margin-left: 15px;
}

The surrounding text now flows around the image's left side.

Float is commonly useful for:

• Wrapping article text around an image
• Positioning small icons beside content
• Creating simple magazine-style designs
• Moving a small element to one side

The clear Property

Sometimes an element should begin below a floated element instead of appearing beside it. The clear property handles this behaviour.

.footer {
  clear: both;
}

Common values include:

• left – moves below left-floated elements
• right – moves below right-floated elements
• both – moves below floats on either side
• none – allows the element to remain beside floats

.heading {
  clear: left;
}

This heading begins below any element floated to the left.