Latest web development tutorials

CSS Float (flotante)

¿Qué es CSS Float (flotante)?



El CSS float (flotante), el elemento se moverá a la izquierda oa la derecha, se reorganizan los elementos a su alrededor.

Float (flotante), se utiliza a menudo para las imágenes, pero es muy útil cuando el mismo diseño.


Como elemento flotante

elemento flotante horizontal, significa que el elemento sólo puede mover hacia la izquierda y la derecha y no puede moverse hacia arriba y hacia abajo.

Un elemento flotante intentará mover hacia la izquierda o hacia la derecha hasta que su borde exterior a través de la frontera o de otra caja caja que contiene flotando hasta el momento.

Elementos después del elemento flotante se centrarán en él.

Elementos antes del elemento flotante no se verán afectados.

Si la imagen está flotando derecha, el siguiente texto fluirá alrededor del lado izquierdo de la misma:

Ejemplos

img
{
float:right;
}

Trate »


elementos adyacentes entre sí flotante

Si pones un par de elementos flotantes juntas, si hay lugar, va a ser adyacentes entre sí.

Aquí, nosotros usamos la galería de flotación Foto de la finca:

Ejemplos

.thumbnail
{
float: left;
Anchura: 110px;
altura: 90px;
margen: 5px;
}

Trate »


Claro flotador - Uso clara

Después de que los elementos que flotan alrededor de los elementos reordenados, con el fin de evitar esto, utilice la propiedad clara.

atributo claro especifica el elemento no puede aparecer en ambos lados del elemento flotante.

Utilice la propiedad de texto claro para añadir una galería de imágenes:

Ejemplos

.text_line
{
clear:both;
}

Trate »


Ejemplos

más ejemplos

La imagen de la izquierda agregar bordes y márgenes y los flotadores en el párrafo

Añadamos las fronteras y los márgenes de la imagen y del flotador párrafo a la izquierda

Título y fotos a la derecha del flotador

Dejar que el título y las imágenes al flotador derecha.

Deje que la primera letra de un flotador párrafo a la izquierda

Cambiar el estilo de modo que la primera letra de un flotador párrafo a la izquierda.

No crea una página con una tabla

Utilice flotador para crear un encabezado, pie de página, el contenido de la izquierda y la página principal.


Toda la propiedad CSS float

"CSS" columna indica el número de diferentes versiones de CSS (CSS1 o CSS2) define la propiedad.

属性 描述 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit
1