Seminario CSS - Ejemplo de aplicación estilos para elementos flotantes (float, clear y overflow)

Imágenes flotantes

           .flotante-izq{
                float: left;
            }

float: none

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, urna id gravida semper, libero lacus ultricies tellus, sit amet volutpat magna odio ac massa. Mauris aliquam vitae nisi sed dictum. Integer sed eleifend massa. Pellentesque ac iaculis dui, eu auctor lorem. Nunc in eros metus. Nulla augue massa, sagittis eget pharetra at, viverra at velit. In efficitur, diam eu rutrum tristique, lorem leo ultrices eros, in euismod sem sem vitae erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

float: left

Varios bloques flotantes

Cambie la anchura del navegador para ver los efectos.

           .flotante-der{
                float: right;
            }

<div> flotante a la derecha

Maecenas semper elementum libero quis gravida. Curabitur ante nunc, laoreet ac pretium et, convallis id orci. Duis at tortor fermentum mauris cursus dictum. Vivamus maximus nisi vitae molestie molestie. Phasellus eget facilisis lacus. Mauris congue mi quis nisi vehicula, vel tempus sapien ultricies. Integer finibus ligula justo, vitae commodo nisl malesuada vitae.

<div> flotante a la derecha

Nunc laoreet imperdiet fringilla. Proin ante ligula, tristique sit amet elementum non, tristique ut nulla. Suspendisse potenti. Sed commodo lobortis malesuada. Mauris nunc leo, lacinia eget condimentum in, vulputate eget erat. Integer erat ipsum, molestie sit amet sem id, porttitor pellentesque justo. Praesent ante mauris, mollis ac turpis ac, elementum aliquet ex. Integer sit amet commodo est, eget tempor velit. Sed pulvinar augue sit amet bibendum ultricies.

<div> no flotante

Estoy colocado después pero parece que salgo antes

Vestibulum malesuada ex ac eros sodales, ut varius turpis scelerisque. Integer viverra nunc ac est gravida pharetra. Suspendisse dapibus lobortis purus et aliquet. Vestibulum elementum felis sed tellus auctor luctus. Vivamus vitae elementum libero. Integer mauris erat, hendrerit at mi vel, pretium tincidunt metus. Phasellus sed leo in odio rhoncus varius. Vestibulum hendrerit ante quam, eget imperdiet elit dictum id. Aliquam ut dignissim est. Aenean eros justo, auctor eget cursus ac, tempor nec lacus.

Efecto indeseado de los bloques flotantes

El efecto visual no muy estético visto en arriba se debe a que los navegadores no pueden calcular adecuadamente el tamño de los elementos flotantes en su interior. Una solución es poner el atributo overlow:auto.

           .clearfix{
                overflow: auto;
            }

float: left solucionado

Restaurar el flujo normal

La propiedad clear se emplea para restaurar el flujo normal de representación de un documento después de emplear la propiedad float.

           .clear-left{
                clear:left;
            }

float: left sin restaurar orden

Este párrafo se muestra afectado por el float y el encabezado también

float: left orden restaurado

Este párrafo ya no le afecta el float al tener la propiedad clear

Desbordamiento

           .visible{
                overflow: visible;
            }

            .hidden{
                overflow: hidden;
            }

            .scroll{
                overflow: scroll;    
            }

            .auto{
                overflow: auto;
                
            }
            .scroll-x{
                overflow-x: scroll; 
                overflow-y: hidden;
            }

overflow:visible

overflow:scroll

overflow auto

overflow‑x:scroll overflow‑y:hidden

Se puede forzar solo el scroll en una dimensión

Inicio

Imágenes flotantes

float: none

float: left

Varios bloques flotantes

<div> flotante a la derecha

<div> flotante a la derecha

<div> flotante a la derecha

<div> no flotante

Efecto indeseado de los bloques flotantes

float: left solucionado

Restaurar el flujo normal

float: left sin restaurar orden

float: left orden restaurado

Desbordamiento

overflow:visible

overflow:hidden

overflow:scroll

overflow auto

overflow‑x:scroll overflow‑y:hidden