Na ja, das typische float-Problem nach dem Motto "Wozu die Grundlagen von float lernen, das kann jeder". Der Browser zeigt den Inhalt vollkommen korrekt an.
Die Hintergründe von float füllen ganze Buchkapitel - und nicht die dünnsten. Deshalb nur das wichtigste in Kurzform:
float "hebt" die gefloateten Elemente aus dem Dokumentenfluß.
Alle nachfolgenden Elementen rutschen deshalb unter das gefloatete Element, bis sie wiederum höher als das gefloatete Element sind. Nur ihr Inhalt wird seitlich (in deinem Fall rechts) vom gefloateten Element angezeigt. Sobald der Inhalt das gefloatete Element passiert hat geht es unter dem gefloateten Element weiter.
Das float wird gnadenlos vererbt.
Die Folgen erlebst du grade selbst. Das ausführlich zu erklären sprengt die Möglichkeiten eines Forums.
Der Alexander bleibt am Bild vom "Mitglied werden?" hängen. Wenn der Text vom Alexander kürzer wäre (kannst du ja mal ausprobieren) würde die Elvira noch weiter rechts am Bild vom Alexander hängen bleiben. Nach den HTML-Regeln das ganz normale Verhalten von float, seit über 20 Jahren.
Wenn du bei "Mitglied werden?" den Text Zeile für Zeile verlängest wirst du feststellen, das irgendwann das Bild vom Alexander und schließlich auch die Überschrift mit Alexander nach links rutschen werden.
Deshalb gibt es zu float einen Merksatz, der immer beachtet werden sollte: "Wer floatet muss auch clearen!"
Es gibt verschiedene Möglichkeiten des clearens, Anfänger sollten mit der klassischen beginnen, da die "fortschrittlicheren" Nebenwirkungen haben können, die man bei deren Anwendung kennen sollte.
Bei klassischen clearen bekommt das erste Element, das nicht mehr dem float unterliegen soll, die CSS-Anweisung "clear: both;".
Da du eh' mit br-Elementen um dich schmeißt kannst du jeweils ein br-Element als letztes in jedes div.card-single eintragen und dem die CSS-Anweisungen mit auf ihren Weg geben. Ich empfehle dir für die CSS-Anweisung folgenden Eintrag:
.card-single>br:last-child {
clear: both;
}
Da du br-Elemente auch innerhalb des Card-Textes benutzt sollen nur br-Elemente gecleart werden, die als letzte im div stehen.
Falls dir das zu neu und ungewohnt ist kannst du den eingefügten br-Elementen auch eine Klasse geben und die dann clearen. Das traue ich dir selbstständig zu.
Falls das letzte Element immer ein a-Element ist und das grundsätzlich unterhalb des Bildes stehen soll kannst du auch dem die clear-Anweisung zuweisen.