CSS Float and Clear

Before flexbox and grid existed, float was the main layout tool — it's largely legacy now, but you'll still meet it (image wrapping, old codebases), so it's worth understanding.

img.float-left {
  float: left;
  margin-right: 16px;
}

A floated element is taken out of normal flow and pushed to one side; following inline content wraps around it — classically used to let text flow around an image.

The clearfix problem

A container whose only children are floated collapses to zero height, because floated elements don't contribute to their parent's height. Fix it with clear, applied to something after the floats (or via the "clearfix" hack):

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

For anything beyond wrapping text around an image, prefer flexbox or grid — they solve the same layout problems without float's side effects.