jairogarcíarincón

Introducción

En este apartado introduciremos las propiedades:

• display
• float

Además, prestaremos especial atención al uso de flex por su importancia a la hora de crear estructuras flexibles y fáciles de adaptar a diferentes dispositivos.

Display y Float

Otra propiedad importante a la hora de definir cómo se mostrarán los elementos en pantalla es display. Esta propiedad obtiene valores diferentes por defecto en función del tipo de elemento al que se esté refiriendo, tal y como ya vimos anteriormente. Los cuatro valores más utilizados son:

• block: Los elementos se posiciona como bloques uno debajo del otro, ocupando todo el ancho disponible aún cuando se le defina un ancho concreto. Es la opción por defecto en div, section, nav, article, header, footer, figure, etc.
• inline: Los elementos se posicionan uno al lado del otro, ocupando solo el ancho necesario. Es la opción por defecto en span, strong, em, u, a, mark, time, etc..
• inline-block:Los elementos se posicionan uno al lado del otro siempre que se defina un ancho (width) para ese elemento.
• flex: Dando este valor a la propiedad position del elemento padre, los elementos hijos se posicionarán de forma "flexible" en función de otras propiedades que veremos a continuación.

Por otra parte, la propiedad float nos permite convertir elementos de tipo block en elementos flotantes, de modo que puedan alinearse unos al lado de otros. Puede tomar los valores:

• float: left. Flotará a la izquierda del todo, o a la izquierda del elemento anterior con esa misma propiedad.
• float: right. Flotará a la derecha del todo, o a la derecha del elemento anterior con esa misma propiedad.
• float: none. No flotará.

El inconveniente de float es que los elemento también pierden su altura automática, de modo que otros elementos podrían quedar por debajo de éste (o por encima, en función de su propiedad z-index). Por tanto, es necesario definir la altura de los elementos con la propiedad height.

En el siguiente ejemplo se detallan y explican todas las posibilidades relativas a display y float.

Partiremos de un documento HTML sencillo con cajas numeradas de colores parecido al del ejemplo anterior y que nos servirán de base para definir las propiedades:



A partir de aquí, definimos un CSS que nos permitirá probar las distintas posibilidades dentro de un archivo css/style.css:



En el siguiente enlace puedes comprobar y analizar el resultado. Prueba a ir comentando las diferentes secciones HTML o CSS para una mejor visualización:

VER EJEMPLO DE DISPLAY Y FLOAT

Flex

El uso de flex para posicionar los elemento ha cobrado especial importancia en los últimos años debido a la necesidad de crear sitio webs adaptables a diferentes dispositivos, tales como portátiles, tablets o móviles.

Todas las propiedades y ocpiones disponibles las puedes encontrar en el enlace Flexbox W3 Schools.

No obstante y continuando con la metodología anterior, vamos a mostrar un ejemplo práctico que demuestre y sirva de guía para las diferentes opciones que nos da el uso de flex.

Partiremos de un documento HTML sencillo con cajas numeradas de colores parecido al del ejemplo anterior y que nos servirán de base para definir las propiedades:



A partir de aquí, definimos un CSS que nos permitirá probar las distintas posibilidades dentro de un archivo css/style.css:



En el siguiente enlace puedes comprobar y analizar el resultado. Prueba a ir comentando las diferentes secciones HTML o CSS para una mejor visualización:

VER EJEMPLO DE FLEX

Conclusión

Con esto habríamos terminado la presente clase dedicada a los fundamentos de HTML y CSS.

---

Publicado el 05 de Febrero de 2025

css3csshtml