float maquetar

Float
Curso básico de Maquetación Web

FLOAT

Float . – Capitulo 3 del Curso básico de Maquetación Web, este capitulo está dedicado a la Maquetación web con float, el que para mi, es quizás el peor método de maquetación web que existe o que podemos utilizar.

Su uso, aparte de obsoleto, provoca comportamientos inesperados en función de la cantidad de contenido que hay en cada una de las columnas que queremos maquetar y tiene que ser constantemente formateado para evitar esos comportamientos en la Maquetación web, como veremos a continuación.

Para comenzar a trabajar vamos a partir de una estructura Html5, típica en la que vamos a tener 5 divs cada uno de ellos con una imagen y texto debajo de ella, asi:

Comenzamos la introducción de los estilos generales o normalizadores que nos van a dar un punto de partida igual para todos los navegadores web y quitará algún comportamiento por defecto no deseado.

Viéndose inicialmente así:

float

Como vemos se cumplen las premisas de los estilos normalizadores que hemos aplicado, no hay margenes en el body, y ademas las imágenes son reponsive y se adaptan al 100% del padre, la explicación de esto esta en el capitulo 12, del Curso de HTML

Corregimos el ancho de los div de clase ‘fotos’, para tener un ancho mas manejable y hacer una ‘grilla’, o fila de 3 fotos, ademas de darle al texto un tamaño menor y un borde rojo para ir observando el comportamiento de las cajas ‘fotos’, así:

Viéndose así:

Captura incial float con borde

Como vemos los divs, se comportan como todas las etiquetas en html por defecto, primero intentan colocarse lo mas a la izquierda posible, cuando llegan al limite por la izquierda, intentan subir lo más arriba posible hasta que tropiezan con otro contenedor.

El resultado es el que vemos, un contenedor debajo de otro pegados al margen izquierdo de la pantalla, como decimos este es el comportamiento por defecto de todas las etiquetas que tienen modelos de caja tipo ‘block’

float
Comenzamos la maquetación

Podemos comenzar ahora nuestro ejercicio de maquetación alterando ese comportamiento por defecto de los divs, así:

¡¡¡Maravilla!!! Hemos conseguido nuestro objetivo, formar dos filas de 3 elementos que ademas es responsive

Pues no, la cruda realidad es que esto es un ejemplo ideal, el los que las fotos y el texto son iguales, algo que muy pocas veces va a suceder, ya que el final de una web suele ser ser, el uso por personas que no tienen que estar pendientes de ‘esos detalles’, por ejemplo en WordPress, el cms mas usado del mundo, nunca se sabe lo que el usuario va a introducir y esto va a ocasionar comportamientos indeseados que tendremos que corregir si optamos por la Maquetación web con float.

Vamos a verlos

Vamos a hacer que el segundo div, tenga un texto mayor asi:

Vemos ahora su salida en la web:

problema maquetacion float

Ya no esta tan bien ¿verdad?, vemos que la maquetación web, se ha descuadrado justamente en la segunda fila.

Esto es debido a que float, cambia el comportamiento por defecto de las etiquetas y hace que en lugar de ir hacia izquierda y arriba, fuercen a ir hacia el lado que le indicamos en el float, en nuestro caso a la izquierda left, hasta que encuentra otro elemento.

Pero cuando ‘tropieza’, por así decirlo, con algo, no puede ir mas a la izquierda porque hay otro elemento que se lo impide, y ahí esta el primer comportamiento inesperado que debemos corregir.

El segundo div, es más grande e impide el paso mas a la izquierda del 5º div

Esto es corregido mediante la inclusión de cada una de las filas que queremos crear dentro de un div y a este le vamos a aplicar la propiedad CSS clear:booth, una especie de ‘reseteador’, que va a hacer que cada una de las filas funcione como un elemento independiente evitando así el fallo anterior.

Este seria el HTML

Y ahora el css nuevo que le hemos aplicado a la clase ‘galería’

Su salida en la web

problema maquetacion float corregido

Maquetación web con float
flotar elementos

El uso mas adecuado y pienso que quizá, el único que merece la pena, o que podemos usar para la maquetación web con float, sería el caso en el que queremos que un texto rodee un imagen.

Algo así:

flotar imagenes

Veamos como se hace:

Comenzamos colocando una imagen a la que le daremos un tamaño para dejar espacio a la derecha.

Debajo, un par de etiquetas de párrafo, p, en las que vamos a colocar un texto que será el que rodee la imagen.

Así:

Siendo esta su salida inicial:

imagen de partida flotando imagenes

La forma en la que se muestran los elementos de la página es la esperada debido al tipo de cada elemento: las imágenes son elementos en línea y los párrafos son elementos de bloque.

Vamos con el CSS para llegar al resultado final que buscamos:

Aplicando float al div ‘fotos’, los contenidos de este ejemplo muestran un aspecto mucho más lógico:

Le damos la propiedad max-width, con un valor de 100px para que se haga pequeña y poder flotar el texto alrededor suyo.

Con float:left, le decimos al div que se desplace todo lo posible a la izquierda de la posición en la que se encontraba. El resto de elementos de la página, la p floten a su alrededor

La principal característica de la maquetación web con float es que el resto de elementos de la página se adaptan para fluir alrededor de la caja flotante.

Si añadimos un div ‘fotos’ al ejemplo original y aplicamos los mismos estilos, el resultado es el siguiente:

float div

Este sería el código:

Este ejemplo muestra el verdadero funcionamiento de la maquetación web con float: los elementos se mueven todo lo posible hacia la izquierda o hacia la derecha. Normalmente esto significa que se mueven hasta el borde izquierdo/derecho de su elemento contenedor

Si en una determinada posición existen muchos elementos flotantes, es posible que el nuevo elemento no quepa. En este caso, el elemento flotante se colocaría lo más a la izquierda/derecha posible en la posición inmediatamente inferior.

Por último en una misma posición puede haber elementos flotados a la izquierda y a la derecha:

Este sería el código Html:

Este el código CSS

Y esta su salida en la web:

float left y float right

Float
Más problemas con float

Cuando se utiliza el posicionamiento con float es común encontrarse el problema de que un determinado elemento tenga en su interior solamente elementos flotados y el resultado visual no sea el esperado.

Este código Html

Y este el CSS:

En este cado esperaríamos encontrarnos algo así:

resultado esperado float

El resultado real es sin embargo este:

fallo original float

El resultado nos muestra como con float, los enlaces “anterior” y “siguiente” se salen del div en el que se encuentran. Este comportamiento es habitual cuando un elemento solamente contiene en su interior elementos posicionados con float. Para solucionarlo, aplica la propiedad overflow con el valor auto sobre ese elemento contenedor:

Esto evita que los elementos con float, se salgan del contenedor obteniendo asi el resultado esperado:

resultado esperado float
Capítulos del curso

Maquetación Web

1 julio, 2018
Flexbox

Flexbox
Curso básico de Maquetación Web

Flexbox. - Capitulo 5 del Curso básico de Maquetación Web, en el que veremos las propiedades del modelo de cajas Flexbox ☎ 689 89 42 67
1 julio, 2018
Display: flex

Display: flex
Curso básico de Maquetación Web

Display: flex. - Capitulo 4 del Curso básico de Maquetación Web, en el que veremos en profundidad el modelo de cajas flexibles Flexbox ☎ 689 89 42 67
11 junio, 2018
float maquetar

Float
Curso básico de Maquetación Web

Float. - Capitulo 3 del Curso básico de Maquetación Web, La Maquetación web con float, con sus pros y contras. Pasemos a verlo en profundidad ☎ 689 89 42 67
18 abril, 2018
inline-block

Display: inline-block
Curso básico de Maquetación Web

Segundo capítulo del Curso básico de Maquetación Web, dedicado a la Maquetación web con display: inline-block, un método tradicional de maquetar que vamos a intentar tratarlo en profundidad
11 abril, 2018
curso basico de maquetacion web

Maquetación Web
Introducción a la maquetación web

Comenzamos este Curso básico de Maquetación Web, en el que veremos paso a paso desde cero que es la Maquetación Web, repasaremos conceptos generales de CSS, veremos el pasado, presente y futuro de la Maquetación Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *