Otra forma de manipular el flujo normal y estático de tus páginas web es con la propiedad flotante . Ya ha utilizado esta propiedad en una anterior para envolver el texto alrededor de las imágenes. Pero también puedes usar la propiedad de flotación para tener columnas de texto una al lado de la otra. Incluso puedes usar el flotador para tener navegaciones barras a la izquierda y a la derecha de tus páginas. (Usaremos flotador en nuestros diseños de página, que están por venir.)

Como ejemplo de columna flotante, mira la imagen de abajo, tomada de un navegador:

La propiedad de flotación del CSS

Así que tenemos dos columnas de texto una al lado de la otra. La primera tiene un fondo gris para que puedas ver mejor la columna. También tiene un margen de 10 píxeles. Aquí está el CSS:

La propiedad de flotación del CSS

Y aquí está el HTML:

La propiedad de flotación del CSS

Para el HTML, acabamos de usar las etiquetas DIV para dos párrafos de texto. El El primer párrafo tiene la clase CSS aplicada a él.

Sin embargo, note dos cosas sobre el código CSS. La primera cosa que hay que notar es que hemos usado float: left . La segunda cosa a notar es que nosotros han establecido un ancho para la columna de 200 píxeles. Si no fijas un ancho, entonces cualquier texto que tenga para su columna simplemente fluirá de izquierda a derecha.

Sin embargo, hay un problema con nuestro enfoque. Echa un vistazo a las columnas en el navegador de nuevo. Aunque se ven muy bien uno al lado del otro, esto es sólo porque manipulamos el navegador. Lo hicimos deliberadamente más pequeño para que el texto se redimensionó a sí misma. Si hacemos el navegador más grande, esto es lo que pasa:

La propiedad de flotación del CSS

El texto de la segunda columna se extenderá de izquierda a derecha para llenar el espacio.

Para evitar que lo haga, puedes añadir la clase al segundo DIV, también:

La propiedad de flotación del CSS

Ahora ambos párrafos del texto están flotando a la izquierda, y tienen un ancho de 200 píxeles. El navegador ahora puede ser redimensionado y las dos columnas se mantendrán en su lugar.

Para iniciar el texto en una nueva línea debajo de las columnas, puedes usar el clear propiedad en el CSS, recuerda:

...despejado {

claro: izquierda;

}

Esto borra el valor de flotación y te devuelve al flujo normal y estático. (Usted puede reemplazar la izquierda con la derecha o ambas, dependiendo de sus necesidades).

En la próxima lección, verás cómo crear una sencilla disposición de una columna. le presentará los nuevos elementos de HTML5.

| posicionamiento CSS | una disposición de una columna |;

Recomendado para ti