Het laatste lijstitem krijgt een float: none waardoor het weer een block-level element is dat naast het vorige floated block gaat staan als daar voldoende ruimte is. Als je het laatste lijstitem ook een width: auto geeft wordt de eerder ingegeven li { width: 20%; } overuled voor dit element.
De rode achtergrondkleur die je ziet komt van het laatste lijstitem. De andere lijstitems (hier zonder achtergondkleur) zweven (door hun float) boven het laatste lijstitem (zonder float). De tekst (altijd inline) in het laatste lijstitem voegt zich (zoals bekend, hftsk 9) wel naast de elementen met float.
WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen