Ci sono storicamente molti modi per annullare l’effetto di un float.
Usare un elemento vuoto con clear: both prima della chiusura del contenitore
Storicamente il primo e più usato metodo, che però, se non ben applicato, creava un piccolo spazio nel layout e soprattutto che richiedeva un extra markup nel css. Sarebbe preferibile una soluzione solo CSS. Attenzione che con questo metodo non si usa il float sul contenitore!! Se lo si usa, non fa effetto, ovviamente, perché annulla solo il float degli elementi contenuti. Inoltre è importante che, se usate un div (che non ha uno stile di default) non usiate regole che gli facciano ereditare altri stili (ad esempio con il selettore .contenitore div che vale per tutti i div interni e che magari gli attribuisce qualche stile che lo rende visibile).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis massa in quam euismod luctus. Cras ac diam ac dolor ullamcorper porttitor ac sit amet purus. Suspendisse vehicula erat sed dui bibendum consequat dignissim vitae mauris. Pellentesque cursus, risus non dapibus bibendum, lacus ligula auctor nulla, at laoreet nulla sem vel orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis massa in quam euismod luctus. Cras ac diam ac dolor ullamcorper porttitor ac sit amet purus. Suspendisse vehicula erat sed dui bibendum consequat dignissim vitae mauris. Pellentesque cursus, risus non dapibus bibendum, lacus ligula auctor nulla, at laoreet nulla sem vel orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Usare overflow: hidden o auto
Questo secondo metodo assegna al contenitore overflow:hidden o overflow: auto. Overflow è una proprietà poco nota che serve a determinare cosa succeder quando il contenuto di un contenitore eccede le sue dimensioni esplicite: può essere mostrato, nascosto o mostrato con barre di scorrimento. Abbiamo un altro esempio su questo. Ma quando queste condizioni non si verificano, cioè se il contenuto non eccede il contenitore, l’elemento con proprietà overflow: auto o hidden deve estendersi per l’intera dimensione degli elementi contenuti, annullando l’effetto quindi del float. Controindicazioni: in alcune condizioni elementi che eccedono le dimensioni esplicite del contenitore vengono nascosti o compaiono le barre di scorrimento. Inoltre, a causa di un baco in IE/mac, è consigliabile usare hidden invece di auto; e impostare o width o height esplicitamente sull’elemento contenitore. Vantaggi: nessun markup aggiuntivo. Elegante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis massa in quam euismod luctus. Cras ac diam ac dolor ullamcorper porttitor ac sit amet purus. Suspendisse vehicula erat sed dui bibendum consequat dignissim vitae mauris. Pellentesque cursus, risus non dapibus bibendum, lacus ligula auctor nulla, at laoreet nulla sem vel orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis massa in quam euismod luctus. Cras ac diam ac dolor ullamcorper porttitor ac sit amet purus. Suspendisse vehicula erat sed dui bibendum consequat dignissim vitae mauris. Pellentesque cursus, risus non dapibus bibendum, lacus ligula auctor nulla, at laoreet nulla sem vel orci.
Ci sono altri metodi per il float, ma non sono particolarmente robusti, quindi ci fermiamo qui. Per layout complessi è possibile usare la tecnica del FNE, Float Nearly Everything, che non richiede un clearing del float, poiché tutto è floattato. Come nell’esempio sotto:.
Float Nearly Everything
Anche il contenitore e l’elemento che segue vengono floattati. Un elemento floattato deve contenere estendersi fino alla fine del suo contenuto. L’unico problema è che elementi successivi devono avere ampiezza (esplicita o implicita) uguale o superiore all’ampiezza disponibile per non fluire nello spazio disponibile (nel nostro caso, 30%, dato che il float contenitore è al 70%).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis massa in quam euismod luctus. Cras ac diam ac dolor ullamcorper porttitor ac sit amet purus. Suspendisse vehicula erat sed dui bibendum consequat dignissim vitae mauris. Pellentesque cursus, risus non dapibus bibendum, lacus ligula auctor nulla, at laoreet nulla sem vel orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis massa in quam euismod luctus. Cras ac diam ac dolor ullamcorper porttitor ac sit amet purus. Suspendisse vehicula erat sed dui bibendum consequat dignissim vitae mauris. Pellentesque cursus, risus non dapibus bibendum, lacus ligula auctor nulla, at laoreet nulla sem vel orci.
Quest’ultimo paragrafo scorre a seconda delle dimensioni.
Quest’ultimo paragrafo scorre a seconda delle dimensioni. Se è lungo non scorre, se è corto sì. Dipende dall’ampiezza implicita. Soluzione: definire ampiezza esplicita superiore a quella disponibile.