Prestemos atención a las desventajas del flotador. Cómo se comportan los elementos de bloque y en línea entre sí y si se deben usar juntos. Analicemos qué es una pérdida y cómo afrontarla.
A pesar de que en el último artículo construimos una cuadrícula simple para el sitio usando flotadores, originalmente estaban destinados a ajustar el flujo de elementos en el texto. Flotar tiene tres significados: izquierda: los elementos se adhieren al margen izquierdo; derecha: los elementos se presionan hacia el borde derecho; none: el modo de envoltura está desactivado.
Un elemento envuelto en flotador se puede dimensionar y rellenar, pero si el elemento está en línea, se comportará como un elemento de bloque.
.block1 {
flotador izquierdo;
ancho: 150px;
}
.block2 {
flotar derecho;
ancho: 150px;
}
Hay otro problema al usar flotadores, que se cae del arroyo. Aparece cuando los bloques van uno tras otro, pero solo uno de ellos tiene la propiedad float, entonces estará encima del resto, porque no ve otros bloques. Los elementos en línea se envolverán alrededor de los elementos flotantes, pero el bloque que contiene este texto permanecerá debajo del elemento flotante.
Pero, ¿cómo interactúa el flotador con el flotador?
Se comportan como texto: permanecen uno tras otro mientras haya espacio libre y luego se mueven a una nueva línea. Por lo tanto, con la ayuda de flotadores, comenzamos a construir cuadrículas. Si no queda espacio, se mueven más allá del ancho del sitio, es decir, no van a ninguna parte.
Si el flotador no ve elementos de bloque simples, entonces se puede enseñar a los elementos de bloque a ver el flotador. Usamos la propiedad clear, que deshabilita el ajuste desde todos los lados (o desde los seleccionados). Es decir, un elemento con claro caerá debajo del elemento con flotador.
