Float & Z-Index

float: legacy layout

float was CSS's original layout tool for wrapping text around images and building columns. Modern layout uses Flexbox and Grid instead — but you'll still see float for wrapping text around an image.

Float and clearfix

A floated element can collapse its parent's height — the clearfix hack fixes that.

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

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

z-index & stacking

z-index controls which box sits on top when boxes overlap — but it only works on elements with a position other than static. Higher numbers stack above lower ones.

Reach for Flexbox/Grid first

For page layout and component alignment, use Flexbox or Grid — reserve float for its one remaining natural job: wrapping text around an image.