CSS float and flow-root: contain legacy text wraps

When to use it

An archived incident report places a small evidence thumbnail next to its first paragraph. A float can produce the intended text wrap, while the report's local flow-root prevents the thumbnail from protruding into the next section. This is a narrow use for float; a page header or dashboard columns belong in grid or flexbox. The image still needs a meaningful alternative text in HTML if it conveys evidence. Give it a bounded inline size and an external margin so text does not touch it. Test a paragraph shorter than the image, a tall image, and a narrow viewport where the text may have too little room. If the wrap becomes awkward, switch to a stacked layout through a media query rather than forcing a smaller unreadable text column.

.evidence-intro { display: flow-root; }
.evidence-intro__thumb { float: inline-start; inline-size: min(10rem, 38%); margin-inline-end: 1rem; margin-block-end: .5rem; }
@media (max-width: 34rem) { .evidence-intro__thumb { float: none; display: block; inline-size: min(100%, 18rem); } }

Cost and verification

Text wrapping around a single small image is cheap. The maintenance cost is less obvious flow behavior: a float is removed from normal flow and can protrude if the parent does not establish an appropriate context. Flow-root contains it without a clearing pseudo-element. The logical inline-start value follows writing direction where supported; test right-to-left copy. A floating image should not be used to reorder the meaning of a report. Keep the figure and caption in the correct source position, and inspect print pages for awkward breaks.

Common Mistakes

• Do not build whole-page columns with floats.
• Do not forget that a float can extend beyond a short parent.
• Do not shrink evidence text merely to preserve a decorative wrap.

Connected lessons

• CSS Property Decisions
• CSS display and normal flow: choose a formatting context deliberately
• CSS grid template areas: name regions without rewriting document order
• CSS logical properties: space content by reading direction

Further rendering decisions

• CSS shape-outside: let prose wrap around a floated decoration