How do floats and clear work, and are they still used?

Floats were originally for wrapping text around images. They are still useful for that, and for small editorial effects, but they are no longer the recommended way to build page layouts. Flexbox and grid handle distribution and alignment without clearing hacks.

.figure {
  float: right;
  width: 16rem;
  margin: 0 0 1rem 1rem;
}

.footer {
  clear: both;
}

.container {
  display: flow-root;
}

What to remember

• Floated boxes are shifted to the left or right and inline content wraps around them
• Floats remain in the flow as floats but are removed from normal block flow
• A parent can collapse around floated children unless it establishes a block formatting context
• clear: left, right or both prevents an element from sitting beside prior floats
• display: flow-root contains floats without the old clearfix pseudo-element

The clearfix pattern was a workaround for containing floats. It still appears in older codebases, but flow-root is the modern declarative fix when a block formatting context is what you need.