A float miért esik ki a flowból?
Sziasztok!
Azon tűnődöm, hogy mi lehet az értelme annak, hogy a floatolt elemek kiesnek a flowból, és bizonyos esetekben nulla magasságúnak számítanak?
Klasszikus példa:Ha ráteszünk a div#kulso-re egy bordert, látni fogjuk, hogy a div épp nulla magasságú, ami aligha a várt eredmény.
Kétféle megoldással szokás ezt "javítani":
Vagy azt mondjuk CSS-sel, hogy a div#kulso kap egy overflow:auto-t, vagy pedig beteszünk a két belső, floatolt div után egy <div style="clear:both"></div> sort, és akkor máris rendes magassága lesz.
Az első megoldás kényelmesebbnek tűnik, hiszen nem kell hozzányúlni a HTML-hez, míg a második esetben ez elkerülhetetlen.
Sajnos az első megoldás nem teljes körű.
Ha megpróbálsz "kilógatni" a div#kulso-ből valamit, akkor az nem fog látszani, tehát marad a második megoldás, a "pucoló div". (Esetemben form elemek fölé kellett kis címkéket raknom. Ehhez csináltam egy relatív pozicionálású wrappert, amibe beleraktam az abszolút pozicionálású, függőlegesen felfelé mozgatott magyarázó feliratot, és a hozzá tartozó form elemet. A kis címke nem látszott overflow:auto-nál, csak a plusz dives megoldással.)
A kérdésem lényege az, hogy miért működik így a float? Mi lehet ennek az értelme? Miért így találták ki?
■ Azon tűnődöm, hogy mi lehet az értelme annak, hogy a floatolt elemek kiesnek a flowból, és bizonyos esetekben nulla magasságúnak számítanak?
Klasszikus példa:
<div id="kulso">
<div style="float:left">Balra</div>
<div style="float:left">Ez is balra</div>
</div>
Kétféle megoldással szokás ezt "javítani":
Vagy azt mondjuk CSS-sel, hogy a div#kulso kap egy overflow:auto-t, vagy pedig beteszünk a két belső, floatolt div után egy <div style="clear:both"></div> sort, és akkor máris rendes magassága lesz.
Az első megoldás kényelmesebbnek tűnik, hiszen nem kell hozzányúlni a HTML-hez, míg a második esetben ez elkerülhetetlen.
Sajnos az első megoldás nem teljes körű.
Ha megpróbálsz "kilógatni" a div#kulso-ből valamit, akkor az nem fog látszani, tehát marad a második megoldás, a "pucoló div". (Esetemben form elemek fölé kellett kis címkéket raknom. Ehhez csináltam egy relatív pozicionálású wrappert, amibe beleraktam az abszolút pozicionálású, függőlegesen felfelé mozgatott magyarázó feliratot, és a hozzá tartozó form elemet. A kis címke nem látszott overflow:auto-nál, csak a plusz dives megoldással.)
A kérdésem lényege az, hogy miért működik így a float? Mi lehet ennek az értelme? Miért így találták ki?
Kép "körülfolyatása"
normális működés
http://www.quirksmode.org/css/clearing.html
Ennek az elemei nálad is olvashatók. De az auto helyett az overflow:hidden szerencsésebb lesz. IE alatt a position:relative is csodákra képes.
A kérdésedre a válasz az, hogy ha nem így működne, akkor nem floatolna, a webfejlesztők pedig boldogtalanok lennének. Tehát az értelme az, hogy sok boldog webfejlesztő legyen.