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:

<html>
<head>
<style type="text/css">
.containingbox {
    border: 1px solid #000000;
    height: 510px;
    width: 263px;
}
.boxstyle {
    background-color: #FF6633;
    border: 1px solid #FF3300;
    height: 100px;
    width: 100px;
}
</style>
</head>
<body>
<h1>Float test</h1>
<div class="containingbox">
<div style="float: left;" class="boxstyle">1</div>
<div style="float: left;" class="boxstyle">-2</div>
<div style="" class="boxstyle">--3</div>
<div style="" class="boxstyle">---4</div>
<div style="float: left;" class="boxstyle">----5</div>
<div style="" class="boxstyle">-----6</div>
<div style="" class="boxstyle">------7</div>
<div style="" class="boxstyle">-------8</div>
</div>


</body>
</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
 
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.