[cssdesign] Banalità (forse) sui float

[Marco Bertoni]

Ciao Stefano, hai diverse opzioni a disposizione:

Un primo metodo "grezzo" per risolvere il problema, consiste nell’associare la proprietà clear con il valore both a un box vuoto inserito prima del marcatore di chiusura del contenitore.

 	<div class="contenitore">
    	<img class="sinistra" src="chimp.jpg" />
    	<p>Questo box contiene un'immagine flottante a sinistra.</p>
    	<div class="clear"></div>
  	</div>

	.sinistra { float: left; }
	.clear { clear: both; }

Siccome l’elemento di raggruppamento DIV aggiunto non è flottante, il blocco contenitore si espande per avvolgerlo.

Questo metodo ha lo svantaggio di aggiungere al documento un elemento strutturalmente non necessario.

Una soluzione molto più semplice è quella di aggiungere al contenitore la regola overflow: auto; 
(IE e Opera 7 necessitano anche che altezza o larghezza del contenitore siano esplicite. Il metodo non è supportato da Netscape 4 e Opera 6.), vedi: http://www.sitepoint.com/blog-post-view?id=238086

Una soluzione ulteriore è basata su un idea di Tony Aslett poi riadattata da John Gallant e altri che puoi leggere al seguente indirizzo: http://www.positioniseverything.net/easyclearing.html

Ciao!

Marco

Stefano Guandalini ha scritto:
> Cerca e ricerca, non ho trovato soluzione a questo piccolo problema che,
> immagino, sia una banalità.
> Spiego il problema: ho una immagine float:left all'interno di un block che
> contiene anche del testo, che però non è sufficiente per andare a finire
> "sotto" allimmagine (il testo si sviluppa per metà dell'altezza dell'immagine
> sulla sua destra); mettendo un border-bottom al block, si ha l'effetto, non
> simpatico, di ottenere un bordo posizionato alla fine del testo (perché
> l'immagine float esce dal normal flow, se non erro). Come dovrei fare se
> volessi posizionare il bordo al di sotto del margine inferiore dell'immagine
> (ovviamente il bordo dovrebbe abbassarsi qualora il testo fosse più lungo
> della dimensione verticale dell'immagine)?
>
> Questo è un esempio del problema:
> http://62.123.116.140/tests/
>
> E' errato l'approccio?
>
> Grazie anticipate.
> Ciao