ugrás a tartalomhoz

float div rácsúszik a másikra

pentike · 2011. Okt. 24. (H), 11.10
Sziasztok!

Játszottam egy kicsit a css float tulajdonságával és egy fura dologra lettem figyelmes. Adott az alábbi kód:
  1. <html>  
  2. <head>  
  3. <style type="text/css">  
  4. .containingbox {  
  5.     border: 1px solid #000000;  
  6.     height: 510px;  
  7.     width: 263px;  
  8. }  
  9. .boxstyle {  
  10.     background-color: #FF6633;  
  11.     border: 1px solid #FF3300;  
  12.     height: 100px;  
  13.     width: 100px;  
  14. }  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <h1>Float test</h1>  
  19. <div class="containingbox">  
  20. <div style="float: left;" class="boxstyle">1</div>  
  21. <div style="float: left;" class="boxstyle">-2</div>  
  22. <div style="" class="boxstyle">--3</div>  
  23. <div style="" class="boxstyle">---4</div>  
  24. <div style="float: left;" class="boxstyle">----5</div>  
  25. <div style="" class="boxstyle">-----6</div>  
  26. <div style="" class="boxstyle">------7</div>  
  27. <div style="" class="boxstyle">-------8</div>  
  28. </div>  
  29.   
  30.   
  31. </body>  
  32. </html>  
Megnéztem FF 7.0.1-ben és Chrome 14.0.835.202 m -ben, mindkettőben ugyanaz ar eredmény: A 3-4 és a 6-7 egymásra csúszik.

Az érdekes az, hogy pl. az 1-esre egyik float beállítás esetén sem csúszik rá semmi, pedig ha jól tudom a szabvány azt mondja, hogy ha egy elem úszik, akkor a rendes kifestési sorrendben elfoglalt helyét nem tartják fönt, olyan mintha ott se lenne.

Ha ez így helyes, akkor el tudja valaki mondani, hogy valójában milyen szabályok szerint működik a float?

Köszi!
pentike
‹ submit button ie shifting (fura eset) selectek tartalmának újragenerálása javascriptből ›
 ■
1

Megvan a megoldás: Az alsó

pentike · 2011. Okt. 24. (H), 15.58
Megvan a megoldás:

Az alsó kocka szépen beúszik a fölötte lévő alá, csak a benne lévő szöveg ha overflow:visible van megadva, mindenképpen látszani akar és erre az első lehetősége az úsztatott kocka alatt van.