Float e position: delucidazioni

**WebMinus** · 16-10-2011, 23:08

Ciao a tutti.
Sto smanettando un po' per capire bene float e position. Tutto pressochè chiaro tranne due punti:

1- quando creo un blocco, che sia un

o un <div> o qualsiasi cosa, html me lo inserisce andando a capo. C'è un modo per creare un blocco che resti a fianco a quello precedente senza utilizzare il {float}?

2- quando io creo due cartelle una inscritta nell'altra, con bordi colorati e dimensioni stabilite, il risultato è quello di una div "main" che contiente la div "inquestione", adattandosi alle dimensioni di quest'ultima (non ho specificato height di main).

ecco il codice

codice:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#main {
	border: 5px solid yellow;
	}

#inquestione {
	border: 3px solid aqua;
	width: 50px;
	height: 50px;
	}
</style>
</head>
<body>
<div id="main">
asdasd sd ad a asdaa d adadadad d ada adasd as asd asd asd a aasdasdasdasd  sa d das ad as sdsada a adadas as adsda ad s asd a asd ad asd as as dsdasda sad 
<div id="inquestione">
</div>
<div>
</body>
</html>

se però metto nei css, per la <div> "inquestione", {float: left} (o right, se per questo), la div "inquestione" stessa è come se mi uscisse dalla div "main". Seppur restando nel margine sinistro di main, "inquestione" supera il margine inferiore di main, come se fosse esterna ad essa.

Io ho capito che usare una position "relative" rende il blocco parte del normale flusso, ma facendo la prova sopra ho intuito che parlasse del flusso della div "padre" (resta infatti "inquestione" interna ai margini della div "main"). Però superando il margine inferiore di "main", sembra che "inquestione" sia come esterna". Insomma, non ho capito.

Bè, questo è tutto. Grazie in anticipo a tutti.

**sandrone65** · 18-10-2011, 09:06

1) Si è possibile, ma altri metodi ti creano quasi sempre più problemi di quanti te ne risolvono: puoi usare il posizionamento assoluto, ossia il contenitore con position non static ed i div interni da affiancare in position absolute e relative coordinate.
Oppure usi il display:inline sui div da affiancare, ma ciò va bene solo in casi particolari, dove i div per esempio contengono solo testo. I div resi inline non si possono dimensionare.

Tutto è più semplice e pulito usando i float.

Il secondo problema deriva dal fatto che applicando il float tu rimuovi l'elemento dal flusso della pagina e lo posizioni a lato nel contenitore, e tutto ciò che segue si adatterà a posizionarsi intorno all'elemento float (tipico esempio sono le immagini "immerse" nel testo che le circonda). Il float dunque rimuove l'elemento dal flusso per cui il suo contenitore ignora l'altezza dell'elemento float. Quindi se tu evidenzi i bordi del contenitore e del div float vedrai che il div float "esce" dal bordo inferiore del contenitore.
E' normalissimo.
Per evitare ciò ti basta impostare un clear subito dopo l'ultimo float, per esempio

codice:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container{border:2px solid red;}
.divfloat {width:100px; height:100px;float:left;border:2px solid green;}
.clear{clear:both;}
</style>
</head>
<body>
<div id="container">
<div class="divfloat"></div>
<div class="divfloat"></div>
<div class="divfloat"></div>
<div class="clear"></div>
</div>
</body>
</html>

Se elimini l'elemento <div class="clear"></div> vedrai che i tre float verdi andranno a finire "sotto" il bordo inferiore rosso del container

**WebMinus** · 18-10-2011, 09:41

Grazie mille, sei stato molto chiaro. Lentamente sto cominciando a capire il posizionamento. Ho solo un'ultima domanda credo, che forse dovrei aprire in un'altro post, ma è cmq coerente con il titolo di questo. Riguarda la position: relative.

Io so (ho letto

) che il posizionamento relativo inserisce un elemento nel normale flusso. Ma se io non imposto nessun tipo di posizionamento, e quindi implicitamente sono in "modalità" statico, sono comunque nel normale flusso no?

Forse non mi è chiaro che cos'è un posizionamento statico. O relativo. Forse tutti e due.

Grazie a tutti.

**fcaldera** · 18-10-2011, 10:07

Originariamente inviato da WebMinus
Forse non mi è chiaro che cos'è un posizionamento statico. O relativo. Forse tutti e due.

se hai 10 minuti guarda questo tutorial.

http://www.barelyfitz.com/screencast...s/positioning/

**sandrone65** · 18-10-2011, 10:12

Guarda non c'è nulla di difficile, si tratta solo di occuparsi regolarmente di questi problemi o di non occuparsene. Se non te ne occupi ti dimentichi tutto in breve tempo (anche giustamente

).

Qui c'è un'esposizione molto chiara sulle posizioni
http://css.flepstudio.org/css-proprieta/position.html

Discussione: Float e position: delucidazioni

Strumenti discussione

Ricerca discussione

Visualizza

Float e position: delucidazioni

Permessi di invio