¿Qué significa flotar? Función clara para resolver problemas. Diferencias entre elementos flotantes y de posición

Para demostrar la importancia de la propiedad flotante en este ejemplo, aquí hay una captura de pantalla de la misma imagen después de usar Firebug para eliminar el flotador: izquierda:

Galerías de fotos basadas en cuadrículas

Un uso simple de la propiedad flotante es flotar: dejó una serie de fotos contenidas en una lista desordenada, lo que produce el mismo resultado que vería en el marcado de la tabla.

La página de productos de Foremost Canada (ver imagen arriba) muestra sus productos en un formato de cuadrícula junto a una barra lateral. Las fotos se muestran como una lista desordenada con una propiedad flotante, para todos

La página de futones de Paragon Furniture (ver imagen de arriba) es otro ejemplo de una página de producto que utiliza una lista desordenada con etiquetas flotantes.

La página de resultados de búsqueda de iStockphoto (ver imagen arriba) tiene la misma cuadrícula de fotos estructuradas, aquí las fotos contienen float:left

Alineación campos con un botón

Modelar elementos de formulario predeterminados para diferentes navegadores puede resultar problemático. A menudo, en un campo de formulario, como un formulario de búsqueda, es necesario poner elemento al lado del botón “enviar”.

En el diseño web moderno, la propiedad flotar utilizado en casi cada paso. Pero a pesar de esta prevalencia, no todo el mundo comprende el mecanismo de los bloques flotantes, su comportamiento y las consecuencias que puede tener su uso.

¿Qué es "flotar"?

Flotar Esta es una propiedad de posicionamiento CSS. Para comprender su esencia y origen, es necesario prestar atención al diseño impreso. En diseños impresos, la imagen se puede colocar de manera que el texto fluya a su alrededor. A esto se le suele llamar " ajuste de texto".

En un diseño de página, se puede especificar un bloque que contiene texto para su uso. envolver texto alrededor de una imagen o ignorar el envoltorio. Ignorar el ajuste del texto permitirá que las palabras fluyan sobre la imagen como si no estuviera allí. Esto marca la diferencia si la imagen es parte del flujo de la página o no. En diseño web todo es muy parecido.

En diseño web, un elemento al que se le aplica una propiedad CSS. flotar se comportará como una imagen con texto envolviéndola en un diseño impreso. Los elementos flotantes siguen siendo parte del flujo de la página web. Esto es bastante diferente de los elementos posicionados de forma absoluta, que se eliminan del flujo, como si en un diseño impreso se le dijera al bloque de texto que ignorara el ajuste de la imagen. Los elementos absolutamente posicionados no afectan la ubicación de otros elementos, y otros elementos no afectan su ubicación.

Establecer una propiedad flotar para elementos que usan CSS se ve así:

#barra lateral (flotante: derecha;)

Hay cuatro valores válidos para la propiedad. flotar - izquierda, bien, ninguno, heredar. Los dos primeros izquierda Y bien indique la dirección de ubicación: izquierda y derecha, respectivamente. Ninguno- valor predeterminado, indica que el elemento no está flotante y heredar ordenar a un elemento que herede el valor de una propiedad flotar del elemento padre.

¿Para qué se utiliza el flotador?

Más allá del simple ejemplo de ajustar texto alrededor de una imagen, flotar se puede utilizar para crear diseños web.

Flotar, también es cómodo de usar para elementos de diseño pequeños. Por ejemplo, tomemos este pequeño fragmento de una página web. Si configuramos la propiedad flotar Para una imagen de avatar pequeña, cuando el tamaño de la imagen cambia, el ajuste cambiará de acuerdo con las nuevas dimensiones de la imagen:

El mismo diseño se puede implementar usando el posicionamiento relativo del contenedor y el posicionamiento absoluto del avatar y el texto dentro de él. Pero en un diseño implementado de acuerdo con este esquema, cambiar el tamaño de la imagen no afectará el bloque de texto, ya que los elementos con posicionamiento absoluto no afectan a otros elementos y otros elementos no los afectan a ellos.

Reinicio de envoltura

Claro propiedad relacionada con la propiedad flotar. Elemento con conjunto de propiedades claro no se moverá hacia arriba alrededor de un elemento con la propiedad establecida flotar, pero se moverá hacia abajo ignorando el flujo. Y de nuevo, una ilustración que te lo explicará todo sin más.

En el ejemplo anterior, la barra lateral flotaba a la derecha del bloque de contenido principal. El "pie de página" se ha movido al espacio libre debajo de la barra lateral, fluyendo alrededor del bloque con el contenido principal. Para resolver este problema, debe especificar un valor para la propiedad clear:both del pie de página para "borrar" el flujo alrededor de ambas columnas.

#pie de página (claro: ambos;)

Propiedad claro tiene cuatro significados. Ambos Se utiliza para aliviar el flujo en ambas direcciones. Izquierda Y Bien se utilizan para restablecer una dirección: izquierda o derecha, respectivamente. Ninguno- valor predeterminado. Heredar podría ser el quinto valor, pero sorprendentemente no es compatible Explorador de Internet. Restablecer sólo el flujo izquierdo o derecho es bastante raro, pero tiene beneficios prácticos.

Gran colapso

Una cosa acerca de trabajar con flotar Lo desconcertante es el efecto que tiene esta propiedad en los elementos principales. Si el elemento padre no contiene más elementos que un flotante, entonces su altura literalmente colapsa. Esto no siempre se nota, especialmente si el elemento principal no tiene un fondo destacado, pero es importante tenerlo en cuenta.

Pero la alternativa a tal colapso es aún peor. Considere el siguiente escenario:

Si el bloque superior se expande automáticamente para acomodar el elemento flotante, terminaremos con un espacio en el flujo de texto entre párrafos, sin forma de arreglarlo. Si esto fuera así, entonces los desarrolladores se quejarían mucho más a menudo de este comportamiento de los bloques flotantes que de su colapso.

Siempre se debe tener en cuenta el colapso para evitar comportamientos extraños en el diseño y problemas entre navegadores. Podemos resolver este problema usando claro después del elemento flotante en el contenedor, pero antes de que se cierre el contenedor.

Técnicas de cancelación de envoltura

Si se encuentra en una situación en la que sabe dónde estará el siguiente elemento, puede usar clear:both y seguir con sus asuntos. Esto es ideal ya que no requiere ningún truco ni elementos adicionales. Pero lamentablemente normalmente no todo sale como queremos, y en este caso puedes utilizar las siguientes herramientas.

Método de bloque vacío.

Es literalmente un bloque vacío.

Método de desbordamiento.

Basado en la especificación de propiedades CSS rebosar para el elemento padre. Si esta propiedad se establece en auto o oculto para el elemento principal, se expandirá después del elemento flotante, restableciendo efectivamente su envoltura para los elementos posteriores. Este método puede ser semánticamente hermoso, ya que no requiere elementos adicionales. Sin embargo, como puede ver, hemos agregado un nuevo div utilizar este método, que equivale a utilizar un bloque vacío no semántico y es menos flexible. También hay que recordar que la propiedad rebosar no está destinado a desactivar el ajuste. Tenga cuidado de no ocultar contenido accidentalmente ni provocar barras de desplazamiento no deseadas.

Método de limpieza fácil.

Utiliza un pseudoselector CSS (:after) para eliminar el ajuste. En lugar de utilizar la propiedad rebosar Para el elemento principal, establezca una clase adicional, por ejemplo "clearfix" y utilice el siguiente estilo CSS:

Clearfix:después (contenido: "."; visibilidad: oculto; visualización: bloque; altura: 0; claro: ambos;)

Esto utiliza una pequeña parte de contenido oculta a la vista, ubicada después del elemento principal, que restablece el ajuste. Este método no está completo, ya que es necesario mejorarlo para que admita navegadores más antiguos.

Diferentes situaciones requieren diferentes métodos de alivio del farol. Tomemos como ejemplo una cuadrícula de diferentes tipos de bloques.

Para combinar mejor visualmente bloques similares, debemos comenzar una nueva línea cuando cambie el color. Podemos utilizar el método de desbordamiento o limpieza de luz si cada grupo de colores tiene un elemento principal. O utilizamos el método del bloque vacío entre grupos. Tres bloques principales que no existían anteriormente o tres bloques vacíos que no existían anteriormente. Depende de usted decidir qué método es mejor.

Problemas con elementos flotantes.

Los elementos flotantes son a menudo criticados por su fragilidad. Gran parte de esta fragilidad proviene de IE6 y sus errores orientados al flotador. Pero a medida que más y más desarrolladores abandonan el soporte para IE6, es posible que no lo pienses, pero para aquellos que se preocupan por la compatibilidad, aquí hay una breve lista.

Empuje, es síntoma de que el elemento dentro del bloque flotante es más ancho que ese bloque (esto suele pasar con las imágenes). La mayoría de los navegadores mostrarán el elemento flotante sobresaliendo, pero esto no tendrá ningún efecto en el diseño. IE expandirá el bloque flotante y, a menudo, esto tiene un efecto drástico en el diseño. Un ejemplo típico es una imagen que sobresale del bloque de contenido principal y empuja la barra lateral hacia abajo.

Solución rápida al problema.: utilizar desbordamiento: oculto;

para recortar el exceso. Error de doble margen flotar- otra cosa para recordar cuando se trabaja con IE6. Este error se expresa en el hecho de que si el campo está en el mismo lado en el que está orientado

, el campo se duplica. Por ejemplo: Obtendremos el campo izquierdo en 40px ., en lugar de.

Solución rápida al problema. 20px

: Configure display: inline para el bloque flotante y no se preocupe, el elemento permanecerá a nivel de bloque. 3px jogging Solución rápida al problema.. La esencia de este error es que el texto ubicado al lado del elemento flotante está extrañamente desplazado tres píxeles, como si estuviera bajo la influencia de un campo de fuerza ubicado alrededor del elemento flotante.

: establece el ancho y alto del texto afectado. Aparece en IE7 Error en el margen inferior Solución rápida al problema., cuando el elemento padre es un elemento flotante y su hijo ubicado dentro de él también es un elemento flotante. El elemento ancestro ignora el margen inferior (margen inferior) del hijo.

: Utilice padding-bottom en el elemento principal en lugar de margin-bottom en el elemento secundario.

Las preguntas sobre cómo funcionan las propiedades CSS flotante hacia la izquierda y flotante hacia la derecha surgen con envidiable regularidad. Esto se convierte en un tema especialmente delicado para los diseñadores y programadores que han estado armando diseños en tablas durante años y ahora se ven obligados a trabajar con bloques. Además, esto se ve agravado por problemas con el diseño del navegador, aunque recientemente este tema ha comenzado a calmar los nervios de los especialistas.

Os aseguro que no habrá nada especialmente nuevo en este post. Hay mucha información como esta en Internet. Pero cada vez que muestro un ejemplo en mis dedos o busco un enlace donde enviar a mi próximo empleado, ya me canso. Por eso, aquí presentaremos una breve recopilación de lo que nos encontramos con más frecuencia.

Bloques en un contenedor con propiedades CSS flotantes hacia la izquierda y flotantes hacia la derecha establecidas

Problema típico:

1. Hay un contenedor con dos bloques o más.
2. Los bloques internos tienen establecida la propiedad CSS flotante hacia la izquierda o hacia la derecha.
3. Si el tamaño del bloque no es suficiente, el contenido de abajo comienza a encajar en el bloque y todo el diseño se desmorona.

Las ilustraciones siguientes muestran un par de estos casos.

Situación con dos o más bloques con propiedad flotante izquierda CSS

Como debería ser:

La situación cuando un bloque tiene la propiedad CSS flotante hacia la izquierda y otro tiene la derecha

Como debería ser:

Cómo se ve si el diseño es incorrecto:

¿Por qué ocurrió esta situación?

Nuestros bloques con las propiedades CSS float left y float right están ubicados dentro de un contenedor al que se le da algo de relleno en la parte inferior. A pesar de los parámetros aparentemente correctos, la sangría desde abajo no solo no funciona, sino que además el contenido de los bloques inferiores se infiltra en nuestro bloque superior.

El caso es que los bloques con propiedades flotantes especificadas no afectan el cambio en la altura de su contenedor.

Por ejemplo: en el primer caso, todos los bloques dentro del contenedor están flotando. Por tanto la altura del contenedor será cero.

En el segundo caso, además de bloques flotantes, también tenemos texto en el contenedor. Por tanto, la altura del contenedor corresponderá a la altura del texto que llena este bloque. En consecuencia, si el texto es mayor que la altura de los bloques flotantes internos, no notará el problema. Si no hay suficiente texto, como en el ejemplo anterior, el contenido de los bloques inferiores se extenderá hasta el borde inferior del contenedor.

Solución 1 Agregue un bloque vacío con la propiedad CSS clara: ambos

Antes de cerrar la etiqueta del contenedor, debe colocar un bloque con la propiedad CSS clear:both. Luego, el contenedor se expandirá al bloque inferior, ya que esta propiedad bloquea la influencia de los bloques con las propiedades CSS flotante izquierda y flotante derecha.

Código de página de muestra:

También puedes colocar un bloque con la propiedad clear:both inmediatamente después de la etiqueta de cierre del contenedor o después del último bloque flotante. El contenedor no cambiará su tamaño en esta situación. Y en general, no será necesario, sino un bloque con la propiedad clear:both simplemente corta el contenido de los bloques flotantes.

Código de página de muestra:

Sin embargo, no todo el mundo sabe que el campo directivo corresponde al determinante de un sistema de ecuaciones lineales, lo cual no es sorprendente. Además, el determinante de un sistema de ecuaciones lineales restaura categóricamente el vector, como se esperaba. Los alrededores del punto todavía tienen demanda. El lema, como se desprende de lo anterior, estabiliza significativamente la serie divergente abstracta, lo que sin duda nos llevará a la verdad. El lema desentraña significativamente el logaritmo natural irrefutable; dejaremos más cálculos a los estudiantes como tarea simple.

Código CSS de muestra:

Contenedor ( mostrar: bloque; ) .in_block ( mostrar: bloque; flotante: izquierda; ancho: 100px; alto: 100px; margen derecho: 10px; ) .clear ( mostrar: bloque !importante; margen: 0px !importante; relleno: 0px !importante; claro: ambos !importante; flotante: ninguno !importante altura: 1px !importante;

Metodológicamente no es la solución más elegante, aunque merece el derecho a la vida, ya que es bastante eficaz. Una clara desventaja es el hecho de que tenemos que agregar código adicional al texto de la página.

Solución 2: especifique explícitamente la altura del contenedor

La opción de establecer la altura del contenedor sólo es buena si conoce exactamente el tamaño esperado del contenido de este contenedor. Entonces nuestro CSS se verá así:

Contenedor (pantalla: bloque; altura: 100px;) .in_block (pantalla: bloque; flotante: izquierda; ancho: 100px; altura: 100px; margen derecho: 10px;)

En el caso de que el contenido sea dinámico o el diseño sea "fluido" y el ancho del contenedor pueda cambiar, esta no será una buena solución.

Solución 3: establezca la propiedad de desbordamiento de CSS en el contenedor

Si establece el valor de la propiedad del contenedor rebosar igual auto o oculto, el navegador reconstruirá el contenedor de tal manera que quepa en todos los bloques flotantes y no muestre barras de desplazamiento.

Si configura la propiedad de desbordamiento en automático, prepárese para el hecho de que es posible que aún aparezcan barras de desplazamiento en algunas situaciones. Por lo tanto, debes comprobar minuciosamente el diseño en diferentes modos.

Código CSS de muestra:

Contenedor (pantalla: bloque; desbordamiento: auto;) .in_block (pantalla: bloque; flotante: izquierda; ancho: 100px; alto: 100px; margen derecho: 10px;)

Dos bloques en el mismo nivel con las propiedades CSS especificadas flotan hacia la izquierda y hacia la derecha

Una situación típica: texto que envuelve dos bloques con algún contenido. En este caso, los bloques se ubican a los lados del texto.

Como debería ser:

La propiedad Float es un activo importante y poderoso para los desarrolladores web que trabajan con HTML y CSS. Por otro lado, puede resultar frustrante y confuso si no se comprende completamente cómo funciona esta propiedad.

traducción del artículo CSS flotante 101. Original alistapart.com

Además, en el pasado, debido a algunos errores bastante desagradables en el navegador, era normal estar nervioso al usar la propiedad. flotar en sus conjuntos de reglas CSS. Pero calmemos nuestros nervios y tratemos de aliviar la decepción. Te mostraré exactamente qué hace la propiedad flotante con tus elementos y cómo usarla convenientemente.

Vemos flotadores todos los días en el mundo impreso cuando miramos un artículo de revista con una imagen colocada a la izquierda o a la derecha y un texto bien organizado a su alrededor. En el mundo HTML/CSS, el texto envolverá una imagen dependiendo de la propiedad flotante que se aplique a esa imagen. Usar la propiedad flotante en una imagen es solo uno de muchos ejemplos. Como otro ejemplo, utilizando la propiedad flotante, podemos crear muy fácilmente el popular diseño de dos columnas. De hecho, puedes aplicar la propiedad flotante a cualquier elemento de tu HTML. Al aprender y comprender el uso de la propiedad flotante, junto con la propiedad de posición, podrá sentirse cómodo y seguro al crear cualquier diseño.

Definición de flotador

Empecemos por definir qué es flotar.

Flotante es un cuadro que se mueve hacia la derecha o hacia la izquierda a lo largo de la línea actual. La característica más interesante de un flotador es que el contenido puede fluir a lo largo de su costado. Al aplicar la propiedad float: left, el contenido fluirá hacia abajo en el cuadro en el lado derecho y de manera similar con float: right - down en el lado izquierdo.

La propiedad float tiene 4 valores que podemos aplicar: left, right, herint y none. Cada significado es bastante claro. Por ejemplo, si usa float: left en un elemento, se moverá al borde más a la izquierda en relación con su elemento principal. Y, si especifica float: right , el elemento se moverá de manera similar hacia la derecha. El valor ihnerit le dice al elemento que herede la propiedad de su elemento padre. Y el último valor ninguno es el predeterminado y dice que no se aplique la propiedad. flotar a este elemento.

#container ( ancho: 960px; margen: 0 auto; ) #content ( float: izquierda; ancho: 660px; fondo: #fff; ) #navigation ( float: derecha; ancho: 300px; fondo: #eee; ) #footer ( claro: ambos; fondo: #aaa; relleno: 10px)

Nuestro #pie de página está atascado debajo del bloque de #navegación. Esto sucedió porque hay espacio para un #pie de página debajo del bloque de #navegación y para el flujo normal de diseño del bloque, este es el comportamiento correcto. Pero esto no es en absoluto lo que necesitamos, ¿verdad? Supongo que ya ve la relación entre float y clear y comprende cómo se complementan entre sí.

Si tiene un trastorno obsesivo-compulsivo como yo, es posible que haya notado las diferentes alturas de las columnas #contenido y #navegación en el Ejemplo F; Hay varias soluciones, pero esto está fuera del alcance de este artículo. Recomiendo encarecidamente leer Faux Columns de Dan Cederholm para aprender a hacer bloques de la misma altura, independientemente del contenido que contenga.

flotar primero

Hasta ahora hemos visto algunos ejemplos bastante simples que no generan muchos dolores de cabeza. Sin embargo, existen algunos inconvenientes que se deben tener en cuenta al utilizar la propiedad flotante. Sorprendentemente, uno de los mayores obstáculos tiene menos que ver con CSS y más con HTML. Colocar su elemento flotante dentro de su HTML puede generar resultados diferentes. Eche un vistazo al ejemplo H.

Aquí tenemos un pequeño bloque que tiene una imagen con una propiedad flotante: derecha y texto que la rodea. Nuestro CSS se ve así:

#contenedor (ancho: 280px; margen: 0 automático; relleno: 10px; fondo: #aaa; borde: 1px sólido #999;) img (flotante: derecha;)

Nuestro elemento padre #container tiene un ancho estrecho y mantiene nuestro elemento flotante (la imagen) dentro de sus límites. Nuestro código HTML se ve así:

Este ejemplo nos da el resultado deseado, pero ¿qué pasa si tomamos y reorganizamos algunos elementos en el HTML? En el ejemplo I me moví después del texto

Este es un texto contenido dentro de un cuadro pequeño. Lo estoy usando como ejemplo de cómo colocar sus elementos flotantes en diferentes órdenes en su HTML puede afectar sus diseños. Por ejemplo, eche un vistazo a este fantástico marcador de posición de fotografía que debería estar a la derecha.

Nuestro resultado no es el esperado. Nuestra imagen se ha movido hacia la derecha, pero ya no está en la esquina superior como queremos, sino que ha caído debajo del párrafo; Peor aún, sobresale de la parte inferior de nuestro elemento principal #container. ¿Lo que está sucediendo?

En primer lugar. La regla que encontré por mí mismo es hacer flotar los elementos primero. En mi HTML, casi siempre agrego elementos flotantes al comienzo del marcado y antes de cualquier elemento no flotante con el que interactuarán mis elementos flotantes, como el párrafo del ejemplo anterior. En la mayoría de los casos esto da un resultado positivo.

En segundo lugar. La razón por la que la imagen parece sobresalir de la parte inferior de nuestro bloque #container se debe a algo llamado colapso. Hablemos de colapso y soluciones.

colapsando

Colapsar es cuando un elemento que tiene cualquier número de elementos flotantes no expandirá sus bordes alrededor de sus elementos anidados como lo haría si los elementos anidados no flotaran.

Ahora intentemos solucionar este problema usando CSS en lugar de agregar etiquetas HTML adicionales a nuestro documento como hicimos antes. Existe un método que permite a un elemento principal "aplicar" la propiedad clara después de todos los elementos flotantes. Para hacer esto, use la propiedad CSS de desbordamiento con el valor oculto. Tenga en cuenta que la propiedad overflow no fue diseñada para usarse de esta manera y puede causar algunos problemas, como ocultar contenido o hacer que aparezca una barra de desplazamiento no deseada. Para nuestro ejemplo, sin embargo, seguiremos aplicando la propiedad overflow: oculta a nuestro elemento principal #container:

#contenedor (desbordamiento: oculto; ancho: 260px; margen: 0 automático; relleno: 10px 0 10px 10px; fondo: #aaa; borde: 1px sólido #999;)

Y finalmente, Eric Meyer explica una tercera solución a este problema en su artículo Containing Floats. Según CSS Spec 2.1:

un elemento con la propiedad flotante expandirá sus bordes a elementos flotantes en su interior.

Entonces, al aplicar la propiedad float a #container, nuestro contenedor contendrá nuestra imagen y párrafo, similar a los métodos descritos anteriormente.

En última instancia, todas estas soluciones hacen lo mismo. Obligan a los elementos principales a contar sus elementos flotantes en el flujo. Cada método tiene sus propias ventajas y beneficios. Debe comprender cada uno de ellos y luego aplicar los que funcionen mejor para su situación.

Conclusión

Al utilizar la propiedad flotante, puede mejorar significativamente su técnica para organizar elementos. Comprender cómo funciona una propiedad determinada y qué influye en su comportamiento le brindará una base sólida para utilizar float de manera efectiva.