Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear

Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear

Print Friendly, PDF & Email
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
Valora esta entrada
El posicionamiento flotante es una propiedad que nos permite hacer saltar las cajas del flujo normal del documento.

Nos permite posicionar elementos a la izquierda y/o a la derecha de su elemento contenedor.

En caso de no existir elemento contendor se considera el body.

Puede tomar los siguientes valores:

float: left | right | both;

Una de las características del posicionamiento flotante es que el resto de cajas del documento se redistribuyen para ocupar el espacio vacío dejado por elemento con float.

Ejemplo de uso de float

En este ejemplo tenemos una caja centrada horizontalmente de ancho real 500 + 20 * 2 (paddings) + 1*2 (borders).

Contiene 1 imagen y 2 párrafos.

Se aplica float:left; a la imagen.

El resultado es que los dos párrafos se contornean alrededor de la imagen.

float left para la imagen del cerdito
La imagen tiene un float:left;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Ejemplos posicionamiento flotante y clear">
        <meta name="author" content="Francesc Ricart">
        <title>Posicionamiento flotante cajas</title>       
        <style>
            .contenedor{
                margin:auto;
                width:500px;
                padding:20px;
                border:1px solid #000;
            }
            
            img{
                float:left;
            }         
        </style>
    </head>
    <body>
        
    <div class="contenedor">
        <img src="spidercerdo.jpg" alt="spider cerdo">
        <p class="primero">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quisquam in odio impedit nulla voluptas quaerat est sequi magni ex accusantium, omnis, perferendis, culpa error maiores eveniet ab beatae quod.</p>
        <p class="segundo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio odit qui officiis earum nihil doloremque, itaque. Totam aut, facilis quaerat reprehenderit provident pariatur iusto officiis exercitationem. Iure quaerat, neque. Iure.</p>
    </div>
    </body>
</html>

Ejemplo de uso de la propiedad clear

Clear es una propiedad que sirve para borrar floats a partir de la caja en que son citados.

Es muy usado cuando se maqueta mediante floats (es un tipo de maquetado que a mi no me gusta pero ya hablaremos de ello más adelante)

Por ejemplo en el ejemplo hemos aplicado un float:left; para limpiar un float left.

Los valores que puede tomar son

clear: left | right | both;

Fijaros como en la imagen adjunta el segundo párrafo ha saltado de nivel justo por debajo de la imagen.

Limpieza de posicionamiento flotante
El segundo párrafo tiene un clear:left; También podríamos usar en este caso clear:both;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Ejemplos posicionamiento flotante y clear">
        <meta name="author" content="Francesc Ricart">
        <title>Posicionamiento flotante cajas</title>
        <style>
            .contenedor{
                margin:auto;
                width:500px;
                padding:20px;
                border:1px solid #000;
            }
            img{
                float:left;
            }       
            .segundo{clear:left;}
        </style>
    </head>
    <body>
        
    <div class="contenedor">
        <img src="spidercerdo.jpg" alt="spider cerdo">
        <p class="primero">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quisquam in odio impedit nulla voluptas quaerat est sequi magni ex accusantium, omnis, perferendis, culpa error maiores eveniet ab beatae quod.</p>
        <p class="segundo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio odit qui officiis earum nihil doloremque, itaque. Totam aut, facilis quaerat reprehenderit provident pariatur iusto officiis exercitationem. Iure quaerat, neque. Iure.</p>
    </div>
    </body>
</html>

Otros usos de float

Float nos permite por ejemplo:

  • Apilar elementos lista o enlaces uno al lado de otro para simular un menú de navegación.
  • Desplazar un elemento de un menú a un extremo, al principio o al final.
  • Apilar contenedores cuyos anchos son en porcentaje para simular las columnas de un documento web.

Veremos estos casos detallados en futuros ejemplos y comparadas con otros métodos de posicionamiento de cajas.

¡Hola!

Querido lector,

Espero que esta publicación te sea de utilidad para repasar casos prácticos de aplicación de float y de clear.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Selectores CSS. Que son y como usarlos
- 146
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Factores que afectan al tiempo de carga de una página web
- 255
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Maquetar una página de prestashop 1.6 con bootstrap
- 319
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Concepto de herencia en CSS
- 161
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Concepto de cascada en CSS
- 141
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
Colores CSS para web
- 294
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Pseudo Clases :link, :active, :hover y :visited
- 33
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 217
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
La propiedad z-index
- 14
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Introducción al CSS. Que significa Cascading Style Sheets.
- 135
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.