display: flow-root; adiós a limpiar flotados 24.1.17
El limpiar flotados (clearfix) se va a acabar con el nuevo valor flow-root para la propiedad display.
display: flow-root; adiós a limpiar flotados
El nuevo documento de trabajo de los editores del CSSWG CSS Display Module Level 3
introduce, entre otras novedades, un nuevo valor para la propiedad CSS display
De este nuevo valor flow-root
para la propiedad 'display' dice el documento del Consorcio:
display: flow-root;
flow-root: El elemento genera una caja contenedora a nivel "de bloque" y maneja su contenido utilizando el diseño de flujo (flow content = block o inline). Siempre establece un nuevo contexto de formato de bloque para su contenido.
¿Qué significa todo lo anterior? Es como si declarases cualquiera de los clearfix hacks
o limpiadores de flotados al elemento al que apliques este valor para su "display".
A efectos prácticos los elementos flotados no se salen del flujo del documento
. Por lo tanto, la altura del padre crece incluso con elementos hijos flotados.
Por lo tanto, si dicho elemento aloja algún hijo con un valor distinto a none
para la propiedad float
va a aumentar su altura si fuese necesario para evitar ser desbordado por el hijo y que siempre quede contenido por los límites del padre por muy alto que sea (el hijo).
.padre {
display: flow-root;
/* otras declaraciones */
}
.hijo {
float: right;
/* otras declaraciones */
}
Soporte de display: flow-root;
En estos momentos los únicos navegadores en los que podrás ver funcionando la declaración display: flow-root
son Chrome Canary y Firefox Nightly.
Lecturas recomendadas
CSS Display Module Level 3
- La propiedad CSS Display ¿Qué hay de nuevo, vieja?
- The end of the clearfix hack?[ing] por Rachel Andrew
ADENDA
Alguna de las diferencias entre usar display: flow-root
y clearfix
puedes verlas en el siguiente pen (forked)
See the Pen display: flow-root versus clearfix by Kseso (@Kseso) on CodePen.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
pero es que no tiene sentido esto, porque tambien existen el overflow: hidden;que hace totalmente lo mismo
ResponderEliminarCreo que no tienes claro, Gian Imperiale, qué es cada una de estas dos propiedades y su diferencia:
Eliminaroverflow: Esta propiedad especifica si el contenido de un elemento a nivel de bloque es recortado cuando desborda la caja del elemento (que está actuando como un bloque de contención para el contenido).
Esto es, para gestionar la información que sobrepase los límites de su caja padre cuando por alguna razón esta caja no crece con ella (por tamaños acotas u otros motivos).
clear: Esta propiedad indica cuál de los lados de la(s) caja(s) de un elemento no puede quedar adyacente a una caja flotante anterior.
Esto es, se ha de declarar a un elemento hermano del flotado para que fuerce o no "un salto de línea".
N.B.: ambas definiciones tomadas literalmente de la traducción del Sidar de CSS2.1
Un saludo
no vendría siendo casi lo mismo?
EliminarA ver si lo entendí bien, un elemento padre declarado como flow-root viene a ser como un contenedor de elementos float?
ResponderEliminarNo, Lionel
EliminarA efectos prácticos es como si añadiese al elemento el famoso clearfix
[code]
.elemento::after {
content: "";
display: block;
clear: both;
}
[/code]
Un saludo
OH! muchas gracias me ha servido mucho, gran aclaracion!
ResponderEliminar