Łatwy clear:both bez zbędnych znaczników
Tym razem pokażę wam, w jaki sposób wykorzystując sam CSS, wyclearować float’owane elementy bez dodawania zbędnych div’ów czy co tam jeszcze ktoś sobie wymyśli. Jedziemy 
Przypuśćmy, że posiadamy następujący kod html:
<div style="float:left">Blok float'owany</div> <div>Tego już nie chcemy opływać.</div>
Normalnie w takim przypadku większość programistów wstawiłaby po pierwszym bloku następny, ze stylem clear:both. Istnieje jednak łatwiejsza metoda.
W tym rozwiązaniu skorzystamy skorzystamy z pseudoklasy :after, żeby automatycznie wstawić za element z atrybutem float niewidoczną treść która nam wszystko ładnie wyclearuje.
Kod wygląda następująco:
<style type="text/css">
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* hack dla IE pod Mac'iem */
</style>
<!--[if IE]> /* Hack dla IE */
<style type="text/css">
.clear {
zoom: 1;
display: block;
}</style>
<![endif]-->
Teraz wystarczy do naszego div’a z ustawionym float dodać klasę .clear a powyższy kod doda za nim niewidzialną kropkę, która całkowicie rozwiąże problem zbędnych znaczników. Jedynym minusem jest wątpliwa obsługa tego kodu pod starszymi przeglądarkami, nawet pomimo zastosowanych przeze mnie hacków. No ale jeśli cały czas będziemy się oglądać do tyłu to nie pójdziemy na przód, takie życie 
Fajnie, ale jeśli mamy wymagania co do starszych wersji przeglądarek, to niestety taki kod nie pójdzie na produkcję. W każdym razie dobrze wiedzieć, że jest taka możliwość.
A jak to się zachowa w IE6 / IE7? Niestety nie mam teraz możliwości przetestowania.
.wykliruj-moje-flołtowane-dzieci {
overflow: auto;
width: cośinnegoniżauto;
}
Łatwiej i ładniej
@antyqjon, gdy dodasz do tego jeszcze zoom: 1, to i pod ie6 zadziała.
Halo
No działa, tylko po co strzelać z kanarka do armaty.
Dajesz tylko jednego diva, bez komentarzy w środku:
a klasa wygląda tak:
.floatkiller {clear:both; height:0;}
i po sprawie:) Można to zrobić jeszcze prościej, za pomocą overfow: auto; dla diva zawierającego floatowane elementy.
Pozdr
IMP