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:

Introducción al CSS. Que significa Cascading Style Sheets.
- 207
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.
Sintaxis CSS básica. Cómo se escribe el CSS.
- 248
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Ejemplo de centrado horizontal de una caja con CSS
- 445
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 439
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...
Factores que afectan al tiempo de carga de una página web
- 355
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...
Selectores CSS. Que son y como usarlos
- 230
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Ejemplo de menú vertical con submenú desplegable vertical (CSS)
- 183
Serie de ejercicios de creación de menús con submenús desplegables mediante CSS. Incluye código y descargable.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 419
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 203
Código html y css de como crear un menú vertical con un submenú horizontal.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 60
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
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.