Float & Clear

Float & Clear (the classic layout trick)

float takes an element out of flow and pushes it to one side. These days flexbox/grid are preferred, but float is still everywhere (e.g., wrapping text around images).

Float

img {
  float: left;    /* float: right; also works */
  margin-right: 10px;
}

Text wraps around the floated image.

Values

• left, right, float to that side.
• none, default, no float.
• inline-start/inline-end, logical (left in LTR, right in RTL).

Clear

clear tells an element NOT to sit next to a floated element:

.footer {
  clear: both;    /* stand below all floats */
  clear: left;    /* below left floats */
  clear: right;
}

The "clearfix" hack

When a floating child escapes its container, fix the parent with a pseudo-element:

.container::after {
  content: "";
  display: block;
  clear: both;
}

Float examples

• Image + wrapped paragraph (classic).
• Two equal columns: float left on both.
• Gutter: margins.

Modern advice

Flexbox or Grid should be your layout tools. Use float mainly for text wrapping around media.

TL;DR

• float: left/right pushes element, text wraps.
• clear drops below floats.
• clearfix hack resets parent height.
• Prefer flexbox/grid; float is legacy + text wrap.