Das CSS Box-Modell und Floats: Grundlagen des Layouts

Das Verständnis des CSS-Box-Modells ist die wichtigste Voraussetzung für die Erstellung funktionierender Web-Layouts. Jedes Element auf einer Webseite wird vom Browser als rechteckige Box dargestellt. Wie diese Boxen ihre Größe berechnen und wie sie sich im Dokumentenfluss verhalten, wird durch das Box-Modell und Layout-Techniken wie Floats gesteuert.

1. Das CSS-Box-Modell

Jede CSS-Box besteht aus vier Bereichen (von innen nach außen):

1. Content (Inhalt): Der eigentliche Inhalt des Elements (Text, Bild).
2. Padding (Innenabstand): Der Raum zwischen Inhalt und Rahmen.
3. Border (Rahmen): Der Rahmen um das Element.
4. Margin (Außenabstand): Der Raum außerhalb des Rahmens zu anderen Elementen.

box-sizing: Wie berechnet sich die Größe?

Mit der Eigenschaft box-sizing wird festgelegt, wie der Browser die Gesamtbreite und -höhe eines Elements berechnet.

content-box (Standardwert)

Bei content-box bezieht sich die definierte width und height ausschließlich auf den Inhalt. Padding, Border und Margin werden dazu addiert. Dies macht die Größenberechnung oft unvorhersehbar.

/* Content Box */
.box {
  box-sizing: content-box; /* Standard */
  width: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 5px;
  
  /* Die tatsächliche Breite im Layout beträgt:
     100px (Inhalt) + 40px (Padding links/rechts) + 2px (Border links/rechts) = 142px.
     Der belegte Platz inklusive Margin beträgt 152px. */
}

border-box (Empfohlen)

Bei border-box beinhaltet die definierte width und height bereits das Padding und den Border. Der Inhalt schrumpft entsprechend, um Platz für diese zu machen. Nur der margin wird noch hinzugerechnet. Dies macht das Layouten erheblich einfacher und intuitiver.

/* Border Box */
.box {
  box-sizing: border-box;
  width: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 5px;
  
  /* Die tatsächliche Breite im Layout beträgt exakt 100px.
     Der Inhalt schrumpft auf 58px Breite zusammen (100 - 40 - 2).
     Der belegte Platz inklusive Margin beträgt 110px. */
}

Best Practice: Es ist Standard in modernen Projekten, das Box-Modell für alle Elemente global auf border-box umzustellen.

*, *::before, *::after {
  box-sizing: border-box;
}

2. Floats (Fließende Elemente)

Die float-Eigenschaft wurde ursprünglich entwickelt, um Text um Bilder fließen zu lassen (wie in einem Zeitungs-Layout). Später wurde sie zweckentfremdet, um komplexe mehrspaltige Web-Layouts zu erstellen. Heute ist sie für Layouts weitgehend durch Flexbox und Grid abgelöst, bleibt aber für den ursprünglichen Einsatzzweck (Textumfluss) wichtig.

• Ein gefloatetes Element verlässt den normalen Dokumentenfluss und wird an die äußerste linke oder rechte Kante seines Eltern-Elements verschoben.
• Nachfolgende Inline-Elemente (wie Text) fließen um das gefloatete Element herum.
• Wichtig: Ein Block-Element, das gefloatet wird, benötigt eine explizit definierte Breite (width), andernfalls nimmt es standardmäßig die volle Breite ein und der Float-Effekt ist nicht sichtbar.

.thumbnail {
  float: left;
  width: 150px;
  margin-right: 15px;
}

Floats aufheben mit clear

Wenn ein Element nach einem gefloateten Element platziert wird und nicht mehr darum herumfließen soll, muss der Float-Effekt aufgehoben werden. Dies geschieht mit der clear-Eigenschaft.

.footer {
  /* Verhindert, dass der Footer neben linken oder rechten Floats steht.
     Er rutscht automatisch unter die gefloateten Elemente. */
  clear: both;
}

Das "Clearfix"-Problem

Wenn ein Eltern-Element ausschließlich gefloatete Kind-Elemente enthält, verliert es seine Höhe und "kollabiert" (seine Höhe wird zu 0), da gefloatete Elemente aus dem normalen Fluss entfernt sind. Der moderne Weg, dies zu lösen, ist die Verwendung von display: flow-root auf dem Eltern-Element.

.parent-container {
  /* Verhindert das Kollabieren des Containers bei gefloateten Kindern */
  display: flow-root;
}

Fazit

Während Floats heute nur noch für ihren ursprünglichen Zweck (den Textumfluss um Medien) verwendet werden sollten, bleibt das CSS-Box-Modell das fundamentale Fundament für jedes Layout im Web. Die globale Umstellung auf box-sizing: border-box ist eine grundlegende Best Practice, die in fast jedem modernen Webprojekt zu finden ist.