border u floutovanyho seznamu

http://csstesty.ic.cz/ul_test.html

proc se mi ukazuje border bottom uplne nahore?
kdyz urcim height tak je to ok ale ja nechci urcit height...



tadyhle to jede ale u me ne...
jedine kdyz tam vlozim

.cleaner { 

clear: both; 

height: 0; 

overflow: hidden; 

content: ' '; 

} 

.cleaner hr { 

display: none; 

}



<div class="cleaner">

      <hr />

</div>

ale zda se mi to zbytecny to tam davat kdyz to jinde jede bez toho...

kdepak je chybicka?

ale proc to u toho druheho prikladu je dobre?