¿Para que funciona esto en CSS? / ¿Alternativas? / content,clear

[santaclown]

Hola buenas, estoy siguiendo los tutoriales de w3schools. Os pongo el ejemplo que estoy realizando: [URL="https://www.w3schools.com/css/css_website_layout.asp"]https://www.w3schools.com/css/css_website_layout.asp[/URL]

El caso es que he llegado hasta el footer, todo funciona correctamente en mi página web y me doy cuenta al poner un bgcolor que el footer en vez de colocarse como los otros divs (uno debajo de otro) se queda mal si no aplico lo siguiente en el css:

Código HTML:

{
    content: "";
    display: table;
    clear: both;
}

No entiendo muy bien el significado de esto y como funcionan para colocar posteriormente el div en su sitio (que lo hace claro esta..). Entonces queria saber el funcionamiento de estos y si habria alguna alternativa a esto sin poner estas palabras.

Gracias!

[Rafael]

Eso es un hack para eliminar el flujo producido por algún float anterior.

Ese estilo se aplica a un pseudo elemento:after

Lo que hace es que para no agregar otro <div> o un <br /> o cualquier tag con el atributo clear, que rompa el float anterior, agrega un elemento nuevo en automático a través del CSS, pero invisible ya que el content está "vacío". El display table es para que aunque esté vacío sea un elemento de bloque, table.

Esto en realidad no hace NADA al siguiente div, a tu footer. Lo que hace es que lo anterior no le afecte.

---

Alternativas hay varias... pero lo principal es no usar float. Usar flexbox.

El float déjalo para mandar texto al rededor de una foto y cosas así.