Display Property

Classic Clearfix Techniques

Clearfix solves the classic float-collapse problem: a parent that contains only floated children has zero height. Modern flexbox and grid layouts make floats almost obsolete, but every codebase still has legacy CSS where you have to fix this. This snippet shows the modern `display: flow-root` one-liner alongside the historical pseudo-element clearfix and the empty-div trick, so you know what you are reading when you open old stylesheets.

CSS Utility Tricks: Invisible Text and Filters

Two utility recipes that come up over and over: hiding content correctly (visually-hidden but readable to screen readers, plus a decision matrix for the four ways to make something disappear) and using `filter` for cheap visual effects like blur, grayscale, and drop-shadow. Both are short on their own but easy to get wrong, so they live together as a quick reference.

Print Stylesheet Recipe

When users print a page, they want a clean, readable document, not screenshots of your nav bar. A small `@media print` block can hide chrome, expand link URLs inline, force black-on-white text, and control page sizing and breaks. Drop these recipes into any project that publishes long-form content (articles, receipts, invoices, recipes).

CSS Layout Fundamentals Quiz

Four drills on the foundational CSS layout primitives: the display property, positioning modes, a sticky footer pattern, and the z-index stacking context.