CSS21 min readCSS Clear
Learn how to stop float effects using clear, why layouts break without it, and how footers and sections are protected in real websites.
Clear is used to **stop floating elements** from affecting other content. ## Why clear is needed Floats remove elements from normal flow. Next elements may move up unexpectedly. ## Example problem - Image floated left - Footer comes beside image (wrong) ## Solution ```css .footer { clear: both; } ``` ## UI Visualization - Content stays above - Footer stays below floated elements ## Real-world example - Page footers - Next content sections - Forms after images ## Key idea If you use float, you usually need clear.