Este documento describe unas técnicas para la creación de hojas de estilo en cascada (CSS) accesibles.
[...]
Aunque las técnicas descritas en este documento ayudarán a crear CSS conforme a las "Pautas de Accesibilidad al Contenido en la Web 1.0", estas técnicas no garantizan la conformidad y no son la única manera de crear contenidos conformes.

1. Use un número mínimo de hojas de estilos[/b[ en su sitio.

[b]2. Use hojas de estilo vinculadas en vez de estilos incrustados (directamente en las etiquetas) y evite hojas de estilo incrustadas (directamente en la página).

3. Si tiene más de una, use el mismo nombre de clase ("class") para el mismo concepto en todas las hojas de estilo.

4. Use la unidad "em" para fijar el tamaño de letra.

5. Utilice unidades de medida relativas y porcentajes. Utilice medidas absolutas de longitud sólo cuando las características físicas del medio de salida sean conocidas, por ejemplo con imágenes de mapa de bits.

6. Proporcione un equivalente textual para cualquier imagen o texto importantes generados por la hoja de estilo (por ejemplo, mediante las propiedades "background-image", "list-style", o "content").

CSS2 permite a los usuarios acceder a representaciones alternativas de los contenidos especificadas en valores de los atributos cuando se emplean juntos los siguientes:

o selectores de atributos.
o la función attr() y la propiedad "content"
o los seudo-elementos :before (antes) y :after (después)

7. Asegúrese de que todo contenido importante aparezca dentro del objeto del documento. El texto generado por las hojas de estilo no forma parte del código fuente del documento y no estará disponible para las ayudas técnicas que acceden al Modelo de Objeto del Documento Nivel 1 ([DOM1]).

CSS2 incluye diferentes mecanismos que permiten generar contenido desde la hoja de estilo:

o Los seudo-elementos :before y :after y la propiedad "content". Cuando éstos se emplean conjuntamente, permiten la inserción de marcadores antes o después del contenido del elemento.
o Las propiedades "que", "cue-before", y "cue-after". Estas propiedades permiten a los usuarios reproducir un sonido antes o después del contenido de un elemento.

8. Especifique siempre un tipo de letra genérico por defecto.

9. Use las siguientes propiedades CSS2 para controlar la información de la fuente: "font", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", y "font-weight", en lugar de los siguientes elementos y atributos de tipo de letra desaconsejados en HTML: FONT, BASEFONT, "face", y "size".

10. Si tiene que usar los elementos HTML para controlar la información sobre el tipo de letra, utilice BIG y SMALL, que no están desaconsejados.

11. Las siguientes propiedades CSS2 se pueden emplear para dar estilo al texto:

o Mayúsculas/minúsculas: "text-transform" (para mayúsculas, minúsculas y primera letra mayúscula).
o Efectos de sombra: "text-shadow"
o Subrayado: "text-decoration".

12. No use los elementos BLINK o MARQUEE. Estos elementos no aparecen en ninguna especificación W3C para HTML (es decir, son elementos no estándares)

Si se emplea contenido parpadeante (por ejemplo, un titular que aparece y desaparece a intervalos regulares), proporcione un mecanismo para detener el parpadeo. Con CSS, "text-decoration: blink" producirá el efecto de parpadeo y además permitirá al usuario detener el efecto desactivando las hojas de estilo o redefiniendo la regla en una hoja de estilo de usuario.

13. Utilice hojas de estilo para dar estilo al texto, mejor que representar el texto con imágenes. Usar texto en lugar de imágenes significa que la información estará disponible para un mayor número de usuarios y permitirá a los usuarios redefinir los estilos del autor y cambiar los colores o los tamaños de letra más fácilmente.

Si es necesario utilizar un mapa de bits para crear un efecto de texto (letra especial, transformación, sombras, etc.) el mapa de bits debe ser accesible.

14. Las siguientes propiedades CSS2 pueden ser usadas para controlar el formateo y posición del texto:

o Sangría: "text-indent". No utilice BLOCKQUOTE o cualquier otro elemento estructural para hacer sangrías en el texto.
o Espaciado de letras o palabras: "letter-spacing", "word-spacing". Por ejemplo, en lugar de escribir "H O L A" (que los usuarios generalmente reconocen como la palabra "hola", pero que un lector de pantalla leería como letras independientes) los autores pueden crear el mismo efecto visual aplicando a "HOLA" la propiedad "word-spacing". Los textos sin espacios serán transformados en discurso más fácilmente.
o Espacio en blanco: "white-space". Esta propiedad controla la interpretación del espacio en blanco del contenido de un elemento.
o Dirección del texto: "direction", "unicode-bidi".
o Los pseudoelementos :first-letter y :first-line permiten a los autores hacer referencia a la primera letra o línea de un párrafo del texto.

15. Use números en vez de nombres, para especificar colores.

Use estas propiedades CSS para especificar colores:

o "color", para el color de primer plano del texto.
o "background-color", para el color de fondo.
o "border-color", "outline-color" para colores de bordes.
o Para colores de vínculos, haga referencia a las pseudo-clases :link, :visited, y :active.

16. Asegúrese de que los colores de primer plano y de fondo tienen buen contraste. Si especifica el color de primer plano, siempre debe especificar también el color de fondo (y viceversa).

17. Asegúrese de que la información no se transmite sólo a través del color.

18. Emplee UL para listas sin ordenar y OL para las ordenadas (por ejemplo, utilizar marcadores de forma apropiada) conjuntamente con CSS para proporcionar indicaciones contextuales. (1)

19. Hasta que CSS2 sea ampliamente utilizada por las aplicaciones de usuario o éstas permitan al usuario controlar la interpretación de las listas a través de otros medios, los autores deberían considerar el proporcionar pistas contextuales en las listas anidadas no numeradas.

20. Los contenidos deben ser maquetados, ubicados, colocados en capas y alineados mediante hojas de estilos (sobre todo mediante las propiedades CSS de float y colocación absoluta) y no mediante tablas:

o Las propiedades "text-indent", "text-align", "word-spacing" y "font-stretch", permiten a los usuarios controlar el espaciado sin añadir espacios adicionales. Utilice 'text-align:center' en lugar del elemento desaconsejado CENTER.
o Con las propiedades 'margin', 'margin-top', 'margin-right', 'margin-bottom' y 'margin-left', los autores pueden crear espacios en los cuatro lados del contenido de un elemento, en lugar de añadir espacios de no separación ( ).
o Con las propiedades "float", "position", "top", "right", "bottom" y "left", el usuario puede controlar la posición visual de casi cualquier elemento con independencia de donde aparezca el elemento en el documento. Las propiedades de ubicación pueden ser usadas para crear notas marginales (que se numerarán automáticamente), barras laterales, efectos similares a los marcos, encabezamientos y pies simples y otras más.
o La propiedad "empty-cells" permite a los usuarios dejar vacías celdas de tablas y poder proporcionarles bordes en la pantalla o en papel. Una celda de datos que debe estar vacía no debería ser llenada con un espacio en blanco o un espacio "[b]non-breaking" sólo para lograr un efecto visual[/b].

21. Proporcione textos equivalentes para todas las imágenes, incluyendo las imágenes invisibles o transparentes. Si los diseñadores de contenido no pueden usar hojas de estilo y deben utilizar imágenes invisibles o transparentes (por ejemplo, con IMG) para diseñar con imágenes en las páginas, deberían especificar alt=“” para ellas.

22. Utilice las hojas de estilo para crear líneas y bordes. Las líneas y bordes pueden transmitir la noción de "separación" a los usuarios que pueden ver, pero este sentido no puede ser deducido fuera de un contexto visual.

Utilice las propiedades CSS para especificar los estilos de los bordes:

o "border", "border-width", "border-style", "border-color".
o Para las tablas, "border-spacing" y "border-collapse".
o Para contornos dinámicos, "outline", "outline-color", "outline-style" y "outline-width".

23. Asegúrese de que la presentación del contenido es comprensible cuando no se aplican hojas de estilos. Los autores deberían diseñar siempre documentos que tengan sentido sin hojas de estilo (por ejemplo, el documento debería escribirse en un orden "lógico") y entonces aplicar hojas de estilo para lograr efectos visuales.

24. Estudie la necesidad de utilizar propiedades auditivas de CSS2, las cuales proporcionan información para usuarios invidentes y usuarios de navegadores de voz de manera parecida al tipo de letra que proporciona información visual.

Las siguientes propiedades forman parte de hojas de estilo en cascada de CSS2.

o "volume" controla el volumen del texto hablado.
o "speak" determina si el contenido se pronunciará y, en caso afirmativo, si se debe deletrear o leer como palabras.
o "pause", "pause-before", y "pause-after" controla las pausas antes y después de anunciar el contenido. Permite a los usuarios separar los contenidos para mejorar la comprensión.
o "cue", "cue-before", y "cue-after" especifican un sonido que se reproducirá antes y después del contenido, lo que puede ser valioso para la orientación (parecido a una imágen visual).
o "play-during" controla los sonidos de fondo durante la presentación del elemento (parecido a un imagen de fondo).
o "azimuth" and "elevation" proporcionan una dimensión al sonido, lo que permite a los usuarios distinguir las voces, por ejemplo.
o "speech-rate", "voice-family", "pitch", "pitch-range", "stress", y "richness" controlan las cualidades de los contenidos hablados. Cambiando estas propiedades para diferentes elementos, los usuarios pueden ajustar con detalle la presentación sonora-auditiva de los contenidos.
o "speak-punctuation" y "speak-numeral" controlan la forma de decir los números y la puntuación, lo que afecta la calidad de la experiencia para la navegación por voz.
o la propiedad "speak-header" describe cómo se debe decir la información sobre los encabezados antes de una celda de tabla.

25. Cree distintas hojas de estilo para adaptar la presentación del documento a diferentes dispositivos de salida (Braille, sintetizadores de voz o dispositivos TTY, pantalla, móvil, etc.) mediante los "tipos de medios" de CSS2 (empleados con las reglas @media) Las reglas "@media" también pueden reducir los tiempos de descarga porque permiten a las aplicaciones de usuario ignorar reglas inapropiadas.

Notas
(1) La siguiente hoja de estilo CSS2 muestra cómo especificar números compuestos para listas anidadas creadas tanto con elementos UL como OL. Los ítems están numerados como "1", "1.1", "1.1.1", etc.

Ejemplo.

Sobre tipografía y CSS: Cómo mejorar el aspecto visual y facilitar la lectura de los textos en las páginas web con la ayuda de CSS.

Existen muchos tipos de webs, creadas para infinidad de propósitos, pero en muchos de los casos, el componente más importante es el texto. Unos pequeños cambios en las declaraciones de estilos para alterar la forma como se presenta el texto pueden ser cruciales para que el aspecto de una web pase de ordinario a atractivo, sobre todo, en las webs que se basan en contenido. Pero también es sumamente importante que un texto se pueda leer bien y se ha comprobado que ciertas características de los textos, que podemos definir con CSS, ayudan bastante a aumentar su legibilidad.

CSS incluye diversos atributos de estilo que se pueden utilizar para crear textos más legibles y atractivos. En este artículo pretendemos comentarlos. Quizás no resultará muy novedoso para quien domine las CSS y esté acostumbrado a maquetar páginas basadas en texto, pero esperamos que las personas que empiezan a trabajar con las hojas de estilo puedan encontrar utilidad en esta serie de consejos y referencias.

Cómo afectan los márgenes e interlineado a la velocidad de lectura y comprensión del texto
Se han realizado diversos estudios acerca del uso de márgenes e interlineado y cómo afectan a la velocidad de lectura y comprensión de los textos. Ambos criterios son deseables a la hora de presentar textos, pero se encuentra que a menudo chocan entre sí, es decir, a medida que aumenta la velocidad de lectura, se pierde un poco de capacidad de comprensión. Por tanto, en principio se entiende que lo más deseable sería que las personas entiendan bien lo que se está escribiendo y en un segundo plano, aunque también importante, estaría que pudieran leer los textos con rapidez.

En un estudio de usabilidad se comparan 4 textos formateados de la siguiente manera:
• Con márgenes grandes y espacio entre líneas grandes
• Con márgenes grandes y menor espacio entre líneas
• Con márgenes menores y espacio entre líneas grandes
• Con márgenes menores y menor espacio entre líneas

Se comprobó entre varias personas que la comprensión del texto aumentaba cuando hay más margen y el espacio entre líneas también es mayor. Por lo que respecta a la velocidad de lectura se vió que aumentaba cuando los márgenes y el espacio de interlineado es menor.

En la encuesta se dedujo que las personas prefieren leer textos que tengan espacio en blanco en márgenes y un mayor espacio entre líneas. Un interlineado y márgenes adecuados hacen más fácil leer el texto facilitan su comprensión, sin embargo, si nos pasamos en su uso estaríamos disminuyendo la velocidad con la que las personas pueden revisar nuestro contenido.

Cómo aplicar márgenes e interlineado con CSS
Las hojas de estilo en cascada permiten definir las características del texto como los márgenes y el espacio entre líneas, a través de los conocidos atributos margin y line-height. Es importante definir ambos valores con CSS, dado que los márgenes por defecto de la mayoría de los elementos, por lo menos a la izquierda y derecha, son nulos por defecto. Además, el valor de line-height que utilizan los navegadores por defecto suele ser escaso.

Podemos definir estos atributos, o bien para el cuerpo de la página, o bien para los contenedores en los que necesitemos escribir texto que deseamos que sea legible y atractivo.

Así hemos definido un margen de 20 píxeles arriba, abajo, a la izquierda y a la derecha del cuerpo de la página. Además un espacio entre líneas de 1,5 veces el tamaño de la letra configurada por defecto. La fuente tendrá un tamaño un poco menor que la fuente configurada por defecto.

En este caso hemos definido un una class de CSS definida para las etiquetas DIV donde tenemos un margen arriba y abajo de 10 píxeles y a los lados de 20 píxeles. Para el tamaño del texto y el espacio entre líneas hemos optado, por variar, por expresar los tamaños en píxeles.

Otros atributos CSS para mejorar el aspecto estético de los textos
Aunque los márgenes e interlineado son muy importantes para mejorar el aspecto y aportar mayor legibilidad al texto, existen diversos atributos de estilos que merece la pena conocer y comentar que nos pueden servir especialmente para que el aspecto del texto sea un poco más atractivo.

Espacio entre letras
Con CSS podemos utilizar el atributo letter-spacing para separar o juntar las letras de cualquier texto. Alterar la distancia entre las letras puede ser un recurso estético, pero si nos pasamos puede mermarse la facilidad de lectura, sobre todo en textos largos, por eso es más aconsejable usarlo en los titulares, que suelen ser más cortos. Ojo cuando separamos los caracteres, porque las palabras quedan poco definidas, ya que las letras parece que están sueltas. Un recurso utilizado a menudo con letter-spacing es juntar las letras un poco en los titulares.

Espacio entre palabras
El atributo CSS word-spacing permite separar o juntar las palabras contiguas en un texto. No altera la distancia entre caracteres, sino entre las palabras, por lo que no tiene el problema que comentábamos en letter-spacing. Si separamos las palabras crearemos un espacio en blanco entre ellas mayor, lo que puede dar un afecto más ligero al texto y se leerá fácilmente, porque las palabras se leerán como una unidad. Si juntamos las palabras corremos el riesgo que no se puedan identificar bien como una unidad y el efecto tampoco ayudará a la lectura.

Transformar el texto entre mayúsculas y minúsculas
El atributo CSS text-transform sirve para cambiar las letras entre mayúsculas y minúsculas. Son permitidos los valores: none (que deja el texto como estaba), capitalize (que pone la primera letra de cada palabra en mayúscula), uppercase, (que pone todo en mayúsculas) y lowercase (que pone todo en minúsculas). De nuevo, resultará más útil para textos cortos que se coloquen en titulares o en encabezamientos de cajas.

Sangrado de la primera línea
Con el atributo text-indent podemos hacer un sangrado de la primera línea de cada párrafo. No es muy útil para el cuerpo entero, porque te sangraría todos los elementos de la página, pero para textos largos podría servir en algunos casos, porque da un aspecto al texto más de carta.

Decorar la primera letra o la primera línea de un párrafo
Otro recurso bastante original y que, bien utilizado, puede quedar atractivo es utilizar los pseudo-elementos de CSS :first-letter y :first-line, con los que podemos asignar estilos diferentes a la primera letra de un párrafo o a la primera línea completa. Algo que, de nuevo, se utiliza bastante en los medios escritos, pero no tanto en la web.

Justificar el texto
Entre los estilos de párrafo, los alineamientos del texto son bastante interesantes. En concreto el atributo text-aling permite varios valores que seguramente conozcamos, como left, rigth y center. Pero hay otro valor, justify, que sirve para alinear la terminación de las líneas a ambos lados del texto, tanto a la izquierda como la derecha. Aunque da un aspecto bastante diferente a la web, se utiliza bastante menos dado que las personas no están acostumbradas a leer texto justificado en la web y realmente no ayuda a aumentar la comprensión del mismo. Pero existe un problema estético, en mi opinión, puesto que el justificado queda realmente bien cuando se utilizan columnas más o menos estrechas, pero en estos casos da problemas porque a menudo las palabras quedan muy separadas, cuando se cuentan pocas por línea. Este problema no lo tenemos cuando los textos se colocan en columnas anchas y hay muchas palabras por línea, pero en ese caso visualmente no queda tan atractivo.

Utilizar distintas familias tipográficas
Otro recurso interesante, aunque en este caso más de diseño en general que de hojas de estilo en particular, es jugar con distintos tipos de letra en la página. Por ejemplo, queda bien colocar los titulares con una tipografía y los cuerpos con otra. En este caso incluso nos podemos aventurar a trabajar con fuentes bastante diferentes, lo que dará una marca especial a nuestro sitio. En cualquier caso, no es recomendable utilizar más de 2 familias tipográficas distintas.

Recurso interesante para ver distintas fuentes y estilos en funcionamiento
Acabamos este artículo comentando un recurso online donde se puede jugar con distintas tipografías y estilos de caracteres y de párrafo, y ver cómo trabajan juntas.

http://www.typetester.org/

Podemos alterar la fuente, el tamaño del texto, interlineado, espacio entre caracteres, colores, etc. para comparar distintos resultados visualmente. Luego puedes recibir el código CSS que te serviría para asignar ese estilo de fuente a los elementos de tu página web.

Conclusión
Un componente fundamental de las páginas web es el texto y en gran parte de ellas, es el contenido principal. No debemos desaprovechar la oportunidad de utilizarlos como recurso de diseño, para hacerlos atractivos y también fáciles de leer y para ello las hojas de estilo en cascada tienen muchos atributos que nos pueden ayudar. Con CSS podemos utilizar diversos recursos que pueden aportar un estilo propio a tu web en un elemento tan importante como el texto.

En esta entrada definiremos los distintos lugares donde colocar nuestro código CSS:

En el mismo documento:

Puede haber varias formas de colocarlo dentro del documento, sin necesidad de llamar a un archivo CSS externo:

1. Mediante la tag <style type=”text/css” media=”screen”>TU CÓDIGO</style>

Un ejemplo:

2. Desde la etiqueta HTML, mediante la propiedad style:

Desde un documento externo:

Mediante la etiqueta <link>:

O importándolo desde @import:

Espero que la entrada sea útil para todos.

¿Qué es un framework CSS?
Es una librería pensada para poder estandarizar nuestras páginas más cómodamente y de forma sencilla. Con el uso de frameworks podemos conseguir soluciones para estandarizar nuestras páginas y conseguir el mismo diseño en todos los navegadores. Se componen de varios ficheros CSS separados y nos permiten cargar solo lo que necesitemos.

¿Cuando usar un framework CSS?
Todos, generalmente, se usan para estandarizar el código y por eso a veces es necesario:
• Un gran equipo de trabajo.
• Necesidad de llevar un control regular del código estándar.
• Olvidarse de usar hacks en tus proyectos personales.

Ventajas de usar un framework CSS
• Soporte multi-navegador.
• Proyectos públicos (Open Source) con una gran comunidad detrás.
• Poder aprender el código que compone el framework.

Desventajas de usar un framework CSS
• Tener mucho código que no vas a usar nunca.
• La curva de aprendizaje del Framework, a veces demasiado complicada.
• Cuando existen errores no son tan fáciles de solucionar como con nuestro código.
• Puede ser semánticamente incorrecto.

Resumen
Con los frameworks conseguimos hacerlo todo más rápido y eficiente pero olvidamos los conocimientos que teníamos del lenguaje, ya que al ser una capa creada nos suaviza el impacto de andar directamente con el código y tal vez en un futuro tengamos problemas si queremos cambiar de framework.

Mirándolo desde otra perspectiva, para proyectos dinámicos y desarrollos en equipo es muy recomendable ya que así obtendremos un estándar de fácil adaptación por cualquier miembro del equipo.

Nunca viene mal tener a mano una chuleta (guía) sobre las principales etiquetas en CSS.

La lista es para principiantes, así que los usuarios medios y avanzados ya se la sabrán de memoria, pero que no se preocupen, haremos otras guías para ellos también.

Color del texto

color: green;

Color de fondo

background-color: black;

Repetir fondo imagen horizontalmente

background: white url("/images/bk.gif") repeat-x;

Repetir fondo imagen verticalmente

background: white url("/images/bk.gif") repeat-y;

Eliminar subrayado de un enlace

a { text-decoration:none; }

Negrita

font-weight: bold;

Cursiva

font-style: italic;

Subrayado

text-decoration: underline;

Todas en mayúsculas

text-transform: uppercase;

Capitalizar primera letra de cada palabra

text-transform: capitalize;

Añadir un margen

margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;

O usa un cuadrado:

margin: 5px 10px 15px 20px;

Espacio

padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

Cuadrado

padding: 5px 10px 5px 10px;

Cuadrado largo (Si top, bottom y izquierda y derecha tienen el mismo valor):

padding: 5px 10px;

Al momento de diseñar nuestra pagina web, las propiedades más importante que debemos aprender para poder lograr casi todas las estructuras posibles son Float y Clear.

Ambas se trabajan juntas, pues una sirve para complementar a la otra.

Float
Float en simples palabras es una propiedad de CSS que nos permite “hacer flotar” un elemento a una posición relativa rompiendo el esquema normal de la pagina.

Nos permitirá con facilidad paginas con 2 o más columnas, entre muchas otras cosas.

Esta propiedad tiene 3 valores importantes:

• Left: Flota el elemento a la Izquierda.
• Right: Flota el elemento a la Derecha
• None: Que el elemento no Flota.

Ahora veremos una serie de ejemplos.

Primero debemos tener dos archivos, el HTML y el CSS:

EL HTML sera así:

Al archivo html lo podremos llamar como queramos, en él simplemente se encuentran 4 divs con un numero dentro y la clase Box asignada a ellos.

Luego nuestro archivo CSS que deberá llamarse style.css y estar en la misma carpeta que el html.

Como vemos le he dado ciertas propiedades como tamaño, color y un borde. Solo para reconocer mejor cada div.

Con este código nuestros divs se verían así:

Como vemos el primer div flota a la izquierda y luego los otros intentan lo mismo, quedando al lado en orden.

Así mismo, si en vez de tener float:left lo cambiamos a float:right veríamos todo de la siguiente manera:

Como vemos los objetos “cambiaron sentido” el primer div se fue a la derecha y así los demás se fueron poniendo a su lado en orden.

Para que noten la utilidad y el cambio, veremos como sería sin la propiedad float.

Como se puede ver los objetos no flotan por lo tanto simplemente van quedando uno abajo de otro.

Con float podremos lograr paginas y diseños de varias columnas.

Pero surge un problema, cuando el tamaño de la pantalla es menor a lo que ocupan nuestros objetos estos se irán corriendo para abajo de la siguiente manera:

Este problema se puede solucionar encerrando a todos estos divs dentro de otro que tenga un tamaño igual o mayor al que ocupan todos los divs en linea. Por ejemplo para corregir este error en mi ejemplo deberíamos encerrarlos en un div con un width:808px; (Contando que cada uno mide 200px más 2px de borde y son 4)

Pero puede ocurrir lo contrario, que queramos que se vea como en la imagen anterior pero al agrandar la resolución de pantalla nuestro diseño se deforme y se forme una linea como en la primera imagen. Para eso tenemos Clear.

Clear
Clear es la propiedad que sirve para “romper” el esquema que estaba formando float.

Como vimos por cada objeto que contenga la propiedad float se irán agrupando a su lado uno tras otro sin interrupción al menos que el tamaño de su contenedor sea menor. Al colocarse clear a un objeto le decimos que actúe como si fuese el primero objeto en tener la propiedad float pero en la siguiente linea, y así el esquema anterior se rompe y comienza uno nuevo de ahí para abajo.

Puede tener los siguientes valor:

• Left: Se rompe el esquema de orden para los elementos con “Float:left”
• Right: Se rompe el esquema de orden para los elementos “Float:right”
• Both: Se rompe el esquema de orden para los elementos con cualquier float, ya sea right o left.

Por ejemplo si en nuestro HTML al tercer div le cambiamos su id a box2 y agregamos al css:

Con esto, sin importar cuanto agrandemos la pantalla nuestra web se vería así.

Con float y Clear podremos crear muchas formas de paginas, aquí algunos ejemplos.

Espero que les sea de utilidad. Para cualquier duda, comenten.