float div rácsúszik a másikra
Sziasztok!
Játszottam egy kicsit a css float tulajdonságával és egy fura dologra lettem figyelmes. Adott az alábbi kód: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
■ 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>
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
Megvan a megoldás: Az alsó
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.