# Float & Z-Index — CSS

Source: https://www.geekswithgeeks.com/en/css/css-float-zindex

> Float's legacy layout role, and controlling stack order with 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.

```css
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.