Clear float – eltünt a háttér?!

Aki weboldalak szerkesztésével foglalkozik, bizonyára találkozott már a float tulajdonság különlegességeivel. A probléma leginkább az szokott lenni, hogy egy div, ami “float: left;”  vagy “float: right;” tulajdonsággal van ellátva, kilép az őt tartalmazó div kereteiből, ezért eltűnik a szülő div háttere.

A probléma megoldására sima HTML oldal esetében a legkézenfekvőbb és legegyszerűbb, ha a szülő divnek a CSSben adunk egy “display: table”-t, ez a megoldás nekem működött a legnépszerűbb böngészőkben.

XHTML oldalaknál több megoldás létezik. A legtöbben azt alkalmazzák, hogy a szülő div végébe egy

<div style="clear: both;"></div>

kódot illesztenek. Azonban ha nem szeretnénk a HTML kódunkat összerondítani oda nem illő dolgokkal, akkor CSS-ből is megoldható a probléma:

div.container:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Ezzel a kóddal a CSS-ből hozunk létre egy láthatatlan divet, ami tartalmazza a clear:both tulajdonságot, de nem jelenik meg a böngészőben.

Végül pedig a legegyszerűbb megoldás, amit találtam:

Adjunk egy “overflow: auto” -t a CSS-ben a szülő divnek. (néhány böngésző – főként az IE6 – igényli, hogy egy magassági vagy szélességi értéket is kapjon a doboz, különben nem működik!)