Deja de usar floats para los layouts en css
Por fin (Después de años de flexbox) he encontrado un approach fácil de entender para dejar de usar el típico float left para hacer layouts.
Perfecto para hacer páginas responsive y layouts con menos breakpoints.
.row { overflow: hidden }
.col { float: left }
.col-50 { width:50% }
@media (max-width: 600px){ .col-50 { width: 100% } }
El cambio es usar display: flex y flex-wrap: wrap para sustituir floats y overflows con muchas ventajas como tener mejor control de tus márgenes y padding y calcular mejor tus columnas. Si eres oldschool como yo, puedes poner columnas dentro con porcentajes y quedaría asi
.row { display: flex; flex-wrap: wrap; }
.col-50 { width:50% }
@media (max-width: 600px){ .col-50 { width: 100% } }
Y ya como última vuelta de tuerca es cómo escribimos los mediaqueries, es mucho más limpio usar min-width y afrontar esta lógica desde dispositivos pequeños (Mobile first)
@media (min-width: 600px){
.row { display: flex; flex-wrap: wrap; }
.col-50 { width:50% }
}
Le debo todo esto al super master Kevin Powell en su video