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

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

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.

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

Comentarios: 6

  1. pero es que no tiene sentido esto, porque tambien existen el overflow: hidden;que hace totalmente lo mismo

    ResponderEliminar
    Respuestas
    1. Creo que no tienes claro, Gian Imperiale, qué es cada una de estas dos propiedades y su diferencia:

      overflow: 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

      Eliminar
    2. no vendría siendo casi lo mismo?

      Eliminar
  2. A ver si lo entendí bien, un elemento padre declarado como flow-root viene a ser como un contenedor de elementos float?

    ResponderEliminar
    Respuestas
    1. No, Lionel

      A efectos prácticos es como si añadiese al elemento el famoso clearfix
      [code]
      .elemento::after {
      content: "";
      display: block;
      clear: both;
      }
      [/code]

      Un saludo

      Eliminar
  3. OH! muchas gracias me ha servido mucho, gran aclaracion!

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap