Una conversación interesante surgió en el trabajo el otro día: ¿Deberíamos usar CSS float propiedad ahora que tenemos CSS Grid y Flexbox?
La respuesta corta
¡No! Bueno, sobre todo. Sin embargo, solo lo usaría hoy para envolver texto alrededor de imágenes, y evitaría usar float enteramente para diseños.
La respuesta más larga y molesta
Antes de flexbox y grid, teníamos que usar CSS float propiedad para hacer cuadrículas y diseños. De hecho, fue lo primero que aprendí sobre diseño web. En una calurosa tarde de verano, abrí una copia de Diseñar con estándares web de Jeffrey Zeldman y luego moví un pequeño div rojo con float: right. Fue magico. Había poder en el float.
Era tan fácil mover algo en la pantalla que ahora me pregunto cuántos diseñadores se enamoraron de la web simplemente por lo fácil que es mover cosas de esa manera.
Pero usando float Crear diseños complejos siempre fue un truco: solo estaba diseñado para permitir que el texto se ajustara a una imagen.
img {
width: 150px;
float: left;
}Los problemas con float comenzamos cuando intentamos construir diseños gigantes y cuadrículas al estilo de las revistas. Pero eso es lo que teníamos que hacer ya que en ese entonces no había alternativas como las tenemos hoy.
Un problema con el float propiedad es que tendrías que envolver los elementos flotantes con algo llamado clearfix que se vea así:
<div class="clearfix">
<div class="float-left">Column</div>
<div class="float-left">Column</div>
<div class="float-left">Column</div>
</div>clearfix:after {
content: "";
display: table;
clear: both;
}Jay Hoffman describió el truco de clearfix hace un tiempo:
El clearfix, para aquellos que no lo saben, es un truco de CSS que resuelve un error persistente que ocurre cuando dos elementos flotantes se apilan uno al lado del otro. Cuando los elementos se alinean de esta manera, el contenedor principal termina con una altura de 0 y puede causar estragos en un diseño fácilmente. Todo lo que podría estar intentando hacer es colocar una barra lateral a la izquierda de su bloque de contenido principal, pero el resultado serían dos elementos que se superponen y colapsan entre sí. Para complicar aún más las cosas, el error es inconsistente en todos los navegadores. El clearfix se inventó para resolver todo eso.
Las cosas empezaron a cambiar lentamente después de eso. En 2017, Rachel Andrew explicó cómo los navegadores pueden manejar el problema de clearfix sin ningún truco. Todo lo que necesitamos es el siguiente CSS para hacer la misma corrección:
.container {
display: flow-root;
}Lo curioso es que no conocía flow-root El valor existió hasta unos tres minutos antes de que escribiera eso. Pero supongo que esto defiende el argumento que estoy a punto de presentar aquí: con CSS Grid y Flexbox realmente no necesitamos float en absoluto. La propiedad fue realmente diseñada para hacer una cosa: dejar que el texto se ajuste a las imágenes. Pero ahora, con grid y flexbox, tenemos poderes maravillosos que pueden hacer todo el trabajo pesado para diseños reales.
Volviendo a la discusión que estaba teniendo en el trabajo. Algunas personas dijeron que deberíamos volver atrás y eliminar todas las instancias de float en nuestro código base porque es un código antiguo y podemos reemplazarlo fácilmente con flexbox o grid. Pero aquí es donde diría, ¡Vaya! espera un segundo. No creo que tener el float La propiedad en algunos lugares de nuestra base de código está haciendo tanto daño, no es un código radiactivo el que está causando problemas.
Entonces, ¿deberíamos usar CSS? float para algo además de dejar que el texto se ajuste al texto? No. Pero, ¿deberíamos salir todos y purgar inmediatamente la web de declaraciones flotantes CSS porque no es pura y no es la forma “correcta” de hacer las cosas? No de nuevo.
Lo bueno de la web es que el código antiguo no debería romper las cosas. Pregúntale a Chris. Un sitio web que no utiliza las propiedades CSS más elegantes o los trucos más geniales no es inútil ni malo. Simplemente hemos reemplazado float con alternativas que son mejores. Creo que es una buena lección aquí que estas propiedades CSS probablemente se quedarán para siempre porque todavía tienen casos de uso aplicables en el diseño web moderno.
Y eso esta bien.