Limpiar un float sin usar un clear.

A veces necesitamos limpiar ciertos float de nuestra página pero, para no romper el esquema de la web, no podemos usar un clear. Esto se da, sobretodo, cuando trabajamos con contenidos dentro de columnas.

Para poder limpiarlo podemos meter el contenido en un div con overflow:auto:

<div style="float: left; width: 33%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in odio magna. Sed lacinia pulvinar nulla, non vehicula mauris vehicula quis.
Fusce nunc elit, malesuada et ullamcorper a, imperdiet eget est. In iam lectus, blandit sit amet pulvinar et, adipiscing viverra dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida feugiat nisi, nec facilisis nisi ornare ac. Phasellus nec mauris vitae velit elementum accumsan sed non massa.
Integer tincidunt vehicula sodales. Suspendisse consequat tristique velit, eget pulvinar metus cursus nec.
Mauris et mi tortor, sit amet sodales urna. Vestibulum justo risus, vehicula id semper id, consectetur lacinia dui.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>

<p>Contenido no "flotado"</p>

<div style="clear: both;">Blah</div>

En este caso, en una maqueta con columnas, nos destrozaría la maqueta. Para resolverlo podemos envolver el contenido anterior al clear en un div, darle overflow:auto y eliminar el clear:

%lt;div style="overflow: auto;">
<div style="float: left; width: 33%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in odio magna. Sed lacinia pulvinar nulla, non vehicula mauris vehicula quis.
Fusce nunc elit, malesuada et ullamcorper a, imperdiet eget est. In
diam lectus, blandit sit amet pulvinar et, adipiscing viverra dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida
feugiat nisi, nec facilisis nisi ornare ac. Phasellus nec mauris vitae velit elementum accumsan sed non massa.
Integer tincidunt vehicula sodales. Suspendisse consequat tristique velit, eget pulvinar metus cursus nec. Mauris et mi tortor, sit amet sodales urna. Vestibulum justo risus, vehicula id semper id, consectetur lacinia dui.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>

<p>Contenido no "flotado"</p>
</div>

<div>Blah</div>

Con esto logramos que la maquetación quede perfecta.