soy Kseso y esto EsCSS

display: flow-root; adiós a limpiar flotados

display: flow-root; adiós a limpiar flotados

·Por Kseso ✎ 6
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

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.

avatar del Editor del blog

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 Don Kseso Kseso