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
5 (100%) 1 voto

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!

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.