Floats and Clears

The float property in CSS is a powerful tool that allows you to control the positioning of elements within a layout. Historically, it was often used to create complex layouts before the advent of more modern layout techniques like Flexbox and Grid.

Float Property

The float property is used to align an element to the left or right of its container.

Floated elements are removed from the normal document flow, meaning that block-level elements (e.g., div, p) that come after the floated element will move up and take its place. Text and inline elements (e.g., span, img) will wrap around the floated element.

Values of float property

1. left - element floats to the left side of its container, and content wraps around it on the right.
2. right - The element floats to the right side of its container, and content wraps around it on the left.
3. none - The element does not float (default value). It stays in its normal flow position.
4. inherit - The element inherits the float value of its parent.

.selector {
  float: left;
}
.selector {
  float: right;
}
.selector {
  float: none;
}
.selector {
  float: inherit;
}

Clear property

When you use the float property, subsequent elements may flow around the floated element. Sometimes, you want to ensure that no elements wrap around the floated element, forcing the next element to start below the floated elements. This is where the clear property comes into play.

1. left The element will move down until it is clear of any floated elements on the left side.
2. right The element will move down until it is clear of any floated elements on the right side.
3. both The element will move down until it is clear of floated elements on both sides.
4. none The element does not clear any floats (default value).

.selector {
  clear: left;
}
.selector {
  clear: right;
}
.selector {
  clear: both;
}
.selector {
  clear: none;
}