[INFO]Utilizzo di float e clear...

[Another-Life]

Qualchuno puo farmi gentilmente un esempio pratico di come possano essere usate queste due proprietà assieme??Thx

[Alberto]

Allora, ad esempio il float:left serve per allineare due oggetti sulla stessa riga,
il clear invece serve per dire ad un oggetto di non considerare il float di quello che lo precede.

Insieme:

.stile{
clear:left;
float:left;
}

Ho dichiarato uno stile che non considererà più il float dell'oggetto precedente, ma che vuole portare sulla sua linea l'oggetto successivo.

Se non sono stato chiaro bacchettami pure....

Ciao

[LA VALE]

L'esempio classico pratico potrebbe essere mettere un footer in fondo alla pagina..
Se hai un layout formato da una, due o più colonne, con proprietà left, perchè un div vada ad allinearsi sotto questi, dovrà avere una proprietà clear...

[Another-Life]

Originariamente inviato da Alberto
Allora, ad esempio il float:left serve per allineare due oggetti sulla stessa riga,
il clear invece serve per dire ad un oggetto di non considerare il float di quello che lo precede.

Insieme:



Ho dichiarato uno stile che non considererà più il float dell'oggetto precedente, ma che vuole portare sulla sua linea l'oggetto successivo.

Se non sono stato chiaro bacchettami pure....

Ciao

Quindi il secondo oggetto andra a sovrapporsi al primo??

[Alberto]

Quindi il secondo oggetto andra a sovrapporsi al primo??

No, si posizionerà sotto.


Cosi

<div style="float:left">Primo</div><div>Secondo</div>

L'output sarà

PrimoSecondo

Così invece

<div style="float:left">Primo</div><div style="clear:left">Secondo</div>

Primo
Secondo

[Another-Life]

Se avessi dato un clear: right; al primo elemento avrei ottenuto lo stesso effetto??

[Alberto]

No, questo era solo un esempio

<div style="float:left">Primo</div><div style="clear:left">Secondo</div>

Primo
Secondo

Lo stesso risultato lo ottieni anche con

<div>Primo</div><div>Secondo</div>

Il Clear da solo non ha senso se non c'è anche un elemento con il float.

Se hai bisogno di mettere due div sulla stessa linea ma alle estremità dello schermo, farai

<div style="float:left">Primo</div><div style="float:right">Secondo</div>

se poi ci aggiungi un terzo div <div>Terzo</div> ottieni questo

PrimoTerzo Secondo

Per fare in modo che il terzo div vada sulla linea successiva anzichè allinearsi con i primi due è necessario aggiungere la proprietà clear:right.

Prova a dare un'occhiata anche qui...

http://css.html.it/guide/lezione/39/...y-float-clear/

[Another-Life]

Ho gia letto tutte le guide sui Css,tuttavia volevo avere qualche conferma visto alcune combinazioni strane che ho ottenuto.Ho diverse curiosità in merito:

<div style="float:left">Primo</div><div style="clear:left">Secondo</div>

Primo
Secondo

Scusa confusione mia....volevo dire:

Se avessi definito al posto di un clear: right; un clear: both; avrei ottenuto lo stesso effetto,confermi?

in questo esempio:

PrimoTerzo Secondo

Per fare in modo che il terzo div vada sulla linea successiva anzichè allinearsi con i primi due è necessario aggiungere la proprietà clear:right.

allora:

Se avessi dichiarato al posto di clear: right; un clear: left; o un clear: both; dovrei ottenere la stessa cosa visto che abbiamo due elementi all'estremita del contenuto....giusto?

Se invece ho intenzione di portare il terzo elemento dopo il secondo elemento come dovrei fare??...(inverto semplicemente la posizione degli ultimi due elementi??)

Grazie per le risposte alla prox XD...

[Alberto]

Se avessi definito al posto di un clear: right; un clear: both; avrei ottenuto lo stesso effetto,confermi?

Certo, both, che vuol dire entrambi, ti "pulisce" il float su entrambi i lati, ma in questo caso fa lo stessa cosa di right

Se avessi dichiarato al posto di clear: right; un clear: left; o un clear: both; dovrei ottenere la stessa cosa visto che abbiamo due elementi all'estremita del contenuto....giusto?

In Questo caso si

Se invece ho intenzione di portare il terzo elemento dopo il secondo elemento come dovrei fare??...(inverto semplicemente la posizione degli ultimi due elementi??)

Grazie per le risposte alla prox XD...

Beh il secondo si trova all'estremità, quindi dovresti dare una posizione non assoluta al secondo, altrimenti visto che il secondo viene prima del terzo dando un float:rigth al terzo avresti
Primo TerzoSecondo

Se inverti la posizione dei due dire che ottieni un risultato migliore