CSS display and normal flow: choose a formatting context deliberately

How the rule works

An audit note should follow the receipt summary in source order and contain its floated thumbnail if one is used. A flow-root wrapper can contain that float without a clearfix utility or a fixed height. This does not make the note a grid or flex container; its children still follow ordinary block flow. Use display: none only when content truly should leave layout and the accessibility tree. A hidden warning cannot help a reader. For a simple vertical article, normal flow is often already correct, with less CSS to maintain than absolute positioning.

.receipt-summary { display: block; }
.audit-note { display: flow-root; padding: 1rem; border: 1px solid #b7c4d1; }
.audit-note img { float: inline-start; margin-inline-end: 1rem; }

Cost and verification

Flow-root adds a formatting context, not a network or script cost. The image still needs dimensions and alternate text in HTML, and floated media can make very narrow text columns hard to read. Test the note at large text sizes and remove the float below the point where it crowds prose. Do not add flow-root to every wrapper by habit; containment can change margin behavior and other layout relationships.

Common Mistakes

• Do not use absolute positioning for ordinary article flow.
• Do not set a fixed height just to contain a float.
• Do not use display:none for information required to complete the task.

Connected lessons

• CSS Layout
• CSS box model and layout: size content without accidental overflow
• CSS overflow: contain long data without losing controls
• HTML image alt text: describe function or information, not pixels alone

Property decisions

• CSS display and visibility: choose the intended hidden state
• CSS float and flow-root: contain legacy text wraps

Further interaction details

• CSS display contents: remove a layout box with care