Het klopt dat je ogenschijnlijk geen verschil ziet als je de { clear: both; } op de voorbeeld-pagina weglaat.
Maar met het floaten van kolommetjes moet je altijd even kijken wat er gebeurt als je het ene of het andere kolommetje langer laat worden. Je maakt dus altijd twee of meer testpagina's bij een meerkoloms-layout.
In dit geval: haal maar eens de Lorem-tekst van de middenkolom weg, of tik wat extra Lorem in de linkerkolom.
Dan zie je meteen wat er gebeurt als je de { clear: both; } weglaat, en waarom ze beweren dat deze clear essentieel is.
Als vuistregel kan je gebruiken:
"Niet geclearde elementen die volgen op een float (of: verschillende floats), kruipen in het hoogst mogelijke gaatje naast de float(s)."
Met vriendelijke groet.
CSShunter
PS: op de voorbeeld-pagina heeft de middenkolom géén float, maar wel een margin links en rechts ter breedte van de ge-floate kolommen links en rechts. Waren die margins er niet, dan was de tekst van de middenkolom naar opzij uitgelopen onder de floats.
Door de linker- en rechtermargin neemt de middenkolom dus eigenlijk de volle beschikbare breedte in beslag. En als de middenkolom het hoogste is, moet het volgende element, de footer, daar wel onder komen: die mag niet hoger kruipen (onder een leeg stukje linker- of rechterkolom). Ook zonder clear! Is dat clear?
