Tutoriales
Enlaces
Licencia
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace https://old.chuidiang.org
En CSS float nos permite hacer columnas o poner fotos en un lateral del texto, de forma que el texto vaya alrededor de la foto. Vamos a ver aquí con detalle el funcionamiento básico de float:left, float:right.
Cuando en una página html vamos colocando elementos <div> (o cualquier otro tag de html), salvo que los coloquemos de una forma especial usando el posicionamiento de CSS, iran de arriba a abajo. Cada <div> ocupa por defecto el 100% del ancho de la página y van todos seguidos. Más o menos lo que ves aquí detrás metidos en recuadros.
Vamos ahora a darle un ancho, por ejemplo, de 100 pixels a div 1.
Vemos que div 2 se sigue colocando debajo, aunque div 1 no ocupe el 100% del ancho. Es posible que nos interese que div 2 suba a la altura de div 1 y se ponga a su derecha. Por ejemplo, div 1 podría ser una foto y div 2 un texto que queremos que salga al lado de la foto.
Podemos conseguir esto haciendo float:left con div 1. De esta forma, div 1 se sale del flujo normal de colocación de los div. Cuando le toque el turno de dibujarse a div 2, se subirá y se pondrá al lado de div 1. Si le damos además más texto a div 2, quedará así
Vemos que el texto de div 2 se coloca alrededor de div 1.
Vamos ahora poner tambien float:left a div 2 y meter el texto largo en div 3, para ver cómo queda
Bien, div 2 se pega a div 1 y es el texto de div 3 el que se despliega ahora alrededor de ambos.
Puedes imagina que float:left va pegando las cajitas div a la izquierda, amontonándolas. El texto del resto de las cajitas que no lleva float:left simplemente se van colocando alrededor según hay hueco.
Lo mismo con float:right, pero para el otro lado.
Supongamos ahora que ponemos muchos float:left seguidos y que el conjunto de las cajitas amontonadas son más anchas que el navegador. Veamos lo que pasa.
Si tienen un pantallón, haz el favor de estrechar el navegador de forma que estos cinco div no quepan seguidos. Si no lo tienes, tampoco estaría de más que jugaras con el ancho del navegador para ver cómo se comporta este conjunto de cajitas.
Vemos que si no hay hueco, los div pasan a la "linea siguiente" y siguen amontonándose por ahí.
Hay sin embargo un pequeño truco que podemos usar y al que podemos sacar utilidad más adelante. Si ponemos un margin-left negativo a uno de estos div, se desplazará a la izquierda. Si es uno de los que está en la "línea de abajo", podemos subirlo y quedará super puesto con los anteriores.
Por ejemplo, si a div 5 le damos un margin-left de -300px (las cajas tienen 200px de ancho), div 5 quedará superpuesto entre div 3 y div 4, así (le pongo un poco de color para que se vea)
Los div que van detrás de div 5, ocuparán su hueco.
En un momento dado, después de haber hecho los float, nos puede interesar que el texto empiece a salir debajo otra vez y no se ponga en el lateral. Por ejemplo, imagina que ponemos una foto con float:left y nos interesa que la descripción de la foto salga en el lado derecho de la foto. Cuando termina la descripción, queremos que el resto del texto siga saliendo debajo. Más o menos como lo siguiente
Para conseguir esto, debemos poner en el div 3, el del texto que va debajo de la foto, un clear:left. Esto hará que div 3 se desplace hacia abajo hasta que no encuentre ninguna cajita pegada en el lado izquierdo con float:left. También se puede poner clear:right para buscar hueco en el lado derecho o clear:both, para buscar algo libre por ambos lados.
Listo de momento. Otro día pondré algunas construcciones que me han llamado la atención con float y clear.