Los floats y para qué siguen sirviendo en CSS

Los floats perdieron el trabajo de layout y conservaron aquel para el que nacieron: envolver texto.

.pull-quote {
  float: inline-start;
  inline-size: 14rem;
  margin: 0 1.5rem 1rem 0;
  shape-outside: circle(50%);
  shape-margin: 1rem;
}

.drop-cap::first-letter {
  float: inline-start;
  font-size: 3.5rem;
  line-height: 0.8;
  padding-inline-end: 0.5rem;
}

.after-figures { clear: both; }

Cómo funciona

1. Un float saca al elemento del flujo y deja que el texto corra a su lado.
2. shape-outside curva ese texto alrededor de la forma, no de la caja.
3. clear empuja un elemento debajo de cualquier float de ese lado.

Palabras clave y builtins usados aquí

• circle
• clear
• float
• margin
• rem

El intento, en números

Líneas

16

Caracteres a escribir

277

Tokens

71

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 50 segundos.

Escribe este fragmento

Paso 5 de 7 en Posicionamiento; paso 21 de 24 en Flexbox y grid.

← Anterior Siguiente →