Floats, and what they are still for in CSS

Floats lost the layout job and kept the one they were invented for: text wrapping.

.pull-quote {
  float: inline-start;
  inline-size: 14rem;
  margin: 0 1.5rem 1rem 0;
  shape-outside: circle(50%);
  shape-margin: 1rem;
}

.drop-cap::first-letter {
  float: inline-start;
  font-size: 3.5rem;
  line-height: 0.8;
  padding-inline-end: 0.5rem;
}

.after-figures { clear: both; }

How it works

1. A float takes an element out of flow and lets text run beside it.
2. shape-outside bends that text around the shape, not the box.
3. clear pushes an element below any float on that side.

Keywords and builtins used here

• circle
• clear
• float
• margin
• rem

The run, in numbers

Lines

16

Characters to type

277

Tokens

71

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 50 seconds.

Type this snippet

Step 5 of 7 in Positioning, step 21 of 24 in Flexbox & grid.

← Previous Next →