El float propiedad especifica si un elemento debe flotar.
La clear propiedad se utiliza para controlar el comportamiento de los elementos flotantes.
La propiedad float
En su uso más simple, el float propiedad se puede utilizar para ajustar el texto alrededor de las imágenes.
El siguiente ejemplo especifica que una imagen debe flotar hacia la derecha en un texto:
La clear de la propiedad
La clear propiedad se utiliza para controlar el comportamiento de los elementos flotantes.
Elementos después de un elemento flotante fluyan alrededor de ella. Para evitar esto, utilice la clear propiedad.
La clear propiedad especifica en el que los lados del elemento elementos flotantes no se les permite flotar:
El clearfix Hack - overflow: auto;
Si un elemento es más alto que el elemento que lo contiene, y que se hace flotar, se desborde fuera de su recipiente.
Entonces podemos añadir overflow: auto; al elemento que contiene para solucionar este problema:
Diseño Web Ejemplo
Es común hacer diseños web completas utilizando el float la propiedad:
Ejemplo
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
} Inténtalo tú mismo " 
Más ejemplos
Una imagen con la frontera y márgenes que flota hacia la derecha en un párrafo
Deja un flotador de imagen a la derecha en un párrafo. Añadir a la frontera y los márgenes de la imagen.
Una imagen con una leyenda que flota hacia la derecha
Deje una imagen con un flotador título a la derecha.
Deje que la primera letra de un flotador párrafo a la izquierda
Deje que la primera letra de un flotador párrafo a la izquierda y el estilo de la letra.
Creación de un menú horizontal
Utilice flotador con una lista de hipervínculos para crear un menú horizontal.
La creación de una página web sin tablas
Utilice flotador para crear una página de inicio con un encabezado, pie de página, el contenido de la izquierda y la página principal.
Todas las propiedades CSS Float
| Propiedad | Descripción |
|---|---|
| clear | Especifica en qué lados de un elemento donde los elementos flotantes no se les permite flotar |
| float | Especifica si un elemento debe flotar |
| overflow | Especifica lo que sucederá si el contenido desborda la caja de un elemento |
| overflow-x | Especifica qué hacer con los bordes izquierdo / derecho del contenido si se desborda el área de contenido del elemento |
| overflow-y | Especifica qué hacer con los bordes superior / inferior del contenido si se desborda el área de contenido del elemento |