Autor Zpráva
Miroslav K.
Profil *
Ahojte, momentálne sa snažím pochopiť float a clear.
Mám napríklad takýto kód:

<style>
  body { margin: 0px; padding: 0px; }
  #rodic { width: 900px; margin: 0 auto;  }
  #prvy { background: red; width: 400px; height: 200px; float: left; }
  #druhy { background: yellow; width: 400px; height: 200px; }
  </style>

A html:
<div id="rodic">
   <div id="prvy"></div>
   <div id="druhy"></div>
  </div>


Keď si tento kód otvorím v prehliadači, bude tam iba ten červený blok. A ja by som sa vás chcel opýtať, že prečo ten žltý blok úplne zmizne? Čakal som totiž, že keď dám plávať ten červený blok, tak ten žltý blok ho bude obtiekať. Keď však tomu žltému bloku pridám float: left, tak už je to v pohode. Prosím vás, nemohli by ste mi vysvetliť prečo ten žltý blok úplne zmizne?
Ďakujem
Plaváček
Profil
Miroslav K.:

Přidej bloku #rodic kouzelnou deklaraci: overflow:hidden. Nebo si nastuduj, jak funguje float (a clear): http://www.pixy.cz/pixylophone/2003_12_archiv.html#1071056082
David1256
Profil
On nezmizne, respektive zmizne jen v některých prohlížečích. V opeře a IE funguje v chrome a mozille ne. Každý prohlížeč ten kód vnímá jinak, takže když přidáš float, začnou jej vnímat i chrome a mozilla.
Miroslav K.
Profil *
Ok, ďakujem vám za odpovede, ten link som si naštudoval, ďakujem vám.

Teda keď nejakému bloku nastavím float, stane sa plávajúcim prvkom, ostatné prvky ho budú obtiekať. Clear nam zasa hovorý že kedy sa má to obtiekanie skončiť. Teda ak mám napr. obrázok s float: left, tak tento obrázok sa "nalepí" na lavú stranu rodičovského prvku a ak tam dám odstavec tak ho bude obtiekať. Ak tomuto odstavcu dám clear: left, tak ten odstavec by sa zobrazil pod tým obrázkom.
Pochopil som to správne?
A ešte, mohli by ste mi prosím vysvetliť prečo ten žltý blok zmizne v Mozille Aký má k tomu dôvod? Nejak to ešte furt neviem pochopiť...

Ďakujem
David1256
Profil
A ešte, mohli by ste mi prosím vysvetliť prečo ten žltý blok zmizne v Mozille Aký má k tomu dôvod?
Je to zřejmě důsledkem nekompatability jednotlivých prohlížečů.
Bubák
Profil
Tak si přečti znova první bod z odkázaného článku, včetně textu v závorce.

Některé prohlížeče ukončují float na konci stránky automaticky, proto se chovají jinak. Je to drobná a neškodná nekompatibilita, protože se řeší standardními způsoby, které zmínil [#2] Plaváček.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0