html - CSS Float Logic
css-float (1)
Aquí está la parte de la respuesta vinculada que es más relevante para su pregunta:
Cuando flota un elemento de bloque, le está diciendo al navegador que lo coloque al lado del objeto flotante anterior, siempre que el contenedor sea lo suficientemente ancho (de lo contrario, caerá debajo del objeto anterior).
Como el autor menciona, esta es una simplificación cruda. La Sección 9.5.1 de la especificación tiene una lista de todas las reglas precisas, pero no voy a citar todo aquí, ya que es una lectura muy larga y solo ciertos puntos son relevantes aquí. Citaré los puntos relevantes mientras paso exactamente por lo que está sucediendo en tu violín.
Compara tus dos capturas de pantalla. Presta atención a las dos casillas que han cambiado de posición, 3_2 y 3_3, así como a sus casillas circundantes, 2_4, 3_0 y 3_1.
antes de
Después
Cuando la pantalla se hace más grande, deja espacio para que 3_2 se mueva desde su posición original al lado de 2_4, hacia arriba y al lado de 3_1:
- Una caja flotante izquierda que tiene otra caja flotante izquierda a su izquierda puede no tener su borde exterior derecho a la derecha del borde derecho de su bloque contenedor. (Sin apretar: un flotador izquierdo puede no sobresalir en el borde derecho, a menos que esté lo más a la izquierda posible). Una regla análoga se aplica a los elementos flotantes a la derecha.
- Una caja flotante debe colocarse lo más alto posible.
- Una caja flotante a la izquierda debe colocarse lo más a la izquierda posible, una caja flotante a la derecha lo más a la derecha posible. Se prefiere una posición más alta que una que esté más a la izquierda / derecha.
Esto a su vez deja espacio para que la siguiente caja flotante ocupe el espacio lo más arriba posible y lo más a la izquierda posible, siguiendo la misma regla que arriba. Como resultado, 3_3 flota, deteniéndose apenas por debajo de 3_2, luego flota lo más hacia la izquierda posible a lo largo del eje horizontal, deteniéndose justo por debajo de 2_4. Tenga en cuenta que aunque parece que 3_3 debería poder caber entre 2_4 y 3_2, no lo hace, porque los márgenes deben respetarse (esto es lo que se entiende por "borde exterior" arriba).
En este punto, se aplican los siguientes elementos, además de los elementos # 8 y # 9 anteriores:
- Si el cuadro actual está flotando a la izquierda y hay cuadros flotantes a la izquierda generados por elementos anteriores en el documento fuente, entonces, para cada cuadro anterior, el borde exterior izquierdo del cuadro actual debe estar a la derecha de la derecha borde exterior del cuadro anterior, o su parte superior debe ser más baja que la parte inferior del cuadro anterior. Reglas análogas son válidas para cajas flotantes a la derecha.
- La parte superior externa de un cuadro flotante no puede ser más alta que la parte superior externa de cualquier bloque o cuadro flotante generado por un elemento anterior en el documento fuente.
Como 3_3 es tan grande, crea una notable protuberancia hacia abajo desde la primera línea de cajas flotantes. Esto aumenta efectivamente la altura de la primera línea. Todos los demás elementos flotantes que siguen a 3_3 deben permanecer en su propia línea, y esta segunda línea de flotadores no debe cruzarse con el borde inferior del margen de 3_3. Esto se rige principalmente por el artículo 5.
He creado 25 cajas de ancho y alto al azar, donde
width == height
(como se muestra)
$(document).ready(function(e) {
for (var count = 0; count < 5; count++) {
for (var iter = 0; iter < 5; iter++) {
$(".content").append("<div id=''" + count + "_" + iter + "'' class=''box''><p>" + count + "_" + iter + "</p></div>");
$(".content div:last").width(Math.round((Math.random() * 100) + 50));
$(".content div:last").height($(".content div:last").width());
}
}
});
.box {
background: #FF0004;
margin: 10px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="content">
</div>
</body>
Estoy tratando de comprender mejor la lógica de la propiedad flotante y el razonamiento detrás del posicionamiento de los elementos flotantes cuando se "apilan" entre sí. por ejemplo (capturas de pantalla tomadas del violín):
¿Qué hace que 3_3 se reubique en la posición que se muestra a continuación cuando la pantalla se agranda?
De acuerdo con W3Schools:
Si coloca varios elementos flotantes uno detrás del otro, flotarán uno al lado del otro si hay espacio .
Entonces, la pregunta es, ¿qué significa " habitación " y cuál es la lógica que gobierna la ubicación de los elementos flotantes?
La respuesta a esta publicación SO: la explicación de CSS Float parece relevante, sin embargo, no parece explicar por qué un elemento flotante se detiene en una ubicación determinada.