WHY oh WHY do floats collapse containing elements? doesn't make sense...

I have problem here:
http://mayacove.com/dev/css/floats2.html

why are <li>'s (gray bg, rounded corners) taller than their containing <ul>'s?????? this is so frustrating.... so the margins for the <ul>'s are not working...
I know I could give the <ul>'s a height, but this is not good practice, right? (esp for responsive design, which is what this pg will be eventually....)
(also: <li>'s have to be float:left; and display:block; I know this method works for IE7 and I can't test on IE so I can't run experiments just for IE...)

also have "collapse" prob with <nav>: if I remove red border from <nav> then the margin I set for it disappears completely:
http://mayacove.com/dev/css/floats2.html

would appreciate suggestions... thank you...