Ich habe auch noch ein bisschen gelesen und vermutlich gibt es ein Problem mit der „clearfix“-klasse für gefloatete Objekte zu tun. Aber ich kriege den Code nicht gefixt:
Die Klasse „clearfix“ wird verwendet, um ein Float-Problem in CSS zu lösen. Wenn ein Element gefloatet wird, wird es aus dem normalen Dokumentenfluss genommen und das nachfolgende Element wird darüber platziert. Wenn alle nachfolgenden Elemente ebenfalls gefloatet sind, kann es passieren, dass der Container des gefloateten Elements keine Höhe hat und somit nicht sichtbar ist.
Die „clearfix“-Klasse sorgt dafür, dass der Container des gefloateten Elements wieder eine Höhe erhält und sichtbar wird. Dazu wird ein Pseudo-Element (meistens ::after) verwendet, das dem Container nach allen Inhalten hinzugefügt wird und durch das clear: both; dafür sorgt, dass der Container tatsächlich alle floatenden Elemente einschließt.
Insgesamt ist die „clearfix“-Klasse also eine nützliche Technik, um Probleme mit dem Layout zu vermeiden, die durch floatende Elemente entstehen können.