• 
• 1. SitePoint
  2. Reference
  3. CSS
  4. Layout Properties
  5. clear
  6. CSS Live Demo: clear (this page)
• See also: All Live Demos

CSS Live Demo: clear

Type your CSS here: (any properties allowed except expression, behavior and @import) .menu li { float:left; } .menu li#item4 { clear:both; } .menu a { display:block; border:1px solid #f90; background:#fec; padding:4px 10px; margin:0 1px 1px 0; color:#c60; text-decoration:none; font:normal normal normal 0.8em sans-serif; } .menu, .menu li { margin:0; padding:0; list-style-type:none; }

Type your HTML here: (any tags allowed except script, iframe, frame, object, img and embed) <ul class="menu"> <li id="item1"><a href="#">One</a></li> <li id="item2"><a href="#">Two</a></li> <li id="item3"><a href="#">Three</a></li> <li id="item4"><a href="#">Four</a></li> <li id="item5"><a href="#">Five</a></li> <li id="item6"><a href="#">Six</a></li> </ul>

Show me!

Your results appear here: