Cita:
Iniciado por fearlex 
por que flotar un elemento, por ke limpiar el flotado, esto me tiene trocado,
Conviene flotar un elemento cuando es de tipo bloque y queremos que se sitúe visualmente a un lado de otro/s elemento/s sean o no de tipo bloque.
Por ejemplo, un listado de links...
Código:
<ul id="menu">
<li><a href="home.html">Home</a> |</li>
<li><a href="dondeestamos.html">Dónde estamos</a> |</li>
<li><a href="contacto.html">Contactar</a></li>
</ul>
... se va a visualizar cada elemento de lista uno debajo del otro al ser elementos de bloque. Si queremos que visualmente aparezcan en una línea (uno al lado del otro) manteniendo su propiedad de elemento de bloque se puede lograr flotándolos a la izquierda
Código:
#menu li{
float: left;
padding-left: 5px;
}
Pero entonces la propiedad se mantendría para con los elementos que vengan a continuación. Si debajo agregamos un párrafo pretendiendo que se muestre debajo de los links ...
Código:
<p>
Lorem ipsum in simul graecis nam. Mei habeo tincidunt ut, aliquip dignissim eum eu. An vide scaevola qui. Utamur scriptorem ne his, eos ei amet eius necessitatibus. An modo magna consetetur sea. Vim at dicta inimicus molestiae.
</p>
...se visualizaría así
Cita: Home | Dónde estamos | Contactar Lorem ipsum in simul graecis nam. Mei habeo tincidunt ut, aliquip dignissim eum eu. An vide scaevola qui. Utamur scriptorem ne his, eos ei amet eius necessitatibus. An modo magna consetetur sea. Vim at dicta inimicus molestiae.
Para indicar que ese párrafo no debe ser influenciado por el flotado anterior se le aplica la propiedad clear
A partir de ahí deja de tener influencia el flotado aplicado a los li del menú.
NOTA: Agregar que esto fue sólo un ejemplo ilustrativo para la propiedad float, pero no quiere decir que sea la mejor manera de mostrar un listado de links en una línea. Personalmente prefiero cambiarles su
display e indicarle que se comporten como elementos de línea
Código:
#menu li{
display: inline;
padding-left: 5px;
}
Un saludo
