.box {
  height: 200px;
  width: 200px;
  border: 1px solid #555555;
  margin: 10px;
  float: left;
}

/*  Ohne float hat die Klasse box die Eigenschaft "display: block", was bedeutet,
    dass die Elemente (also die 3 Boxen) untereinander (ein Element je Zeile)
    angezeigt werden.
    Die Klasse wrapper, welche diese Elemente umspannt, kann dabei seine benötigte
    Höhe selbst berechnen. Fügt man nun float hinzu, werden die Elemente nebeneinander
    angezeigt. Das führt aber dazu, dass der Wrapper die Höhe nicht mehr automatisch
    berechnen kann und daher plötzlich über den 3 Boxen steht.
    Um das zu fixen wurde noch die Klasse clear hinzugefügt, so dass es wieder
    korrekt angezeigt wird.

    Wirklich kapiert hab ich das nicht, ggf. nochmal Lektion 34 anschauen...
*/

.boxA {
  background-color: #67C5C2;
}

.boxB {
  background-color: #3D2117;
}

.boxC {
  background-color: #C84127;
}

.wrapper {
  background-color: #FEFCE8;
  padding: 10px;
  border: 1px solid #000;
}

.clear {
  clear: both;
/*  clear: left;
  clear: right;   */
}