CSS Clear

  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.