Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS Disposición - flotador y clara


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:

Ejemplo

img {
    float: right;
    margin: 0 0 10px 10px;
}
Inténtalo tú mismo "

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:

Ejemplo

div {
    clear: left;
}
Inténtalo tú mismo "

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:

Ejemplo

.clearfix {
    overflow: auto;
}
Inténtalo tú mismo "

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 "

Ejemplos

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