Schwebende Elemente

7.1 Eigenschaft float

Schwebende Elemente mit den Eigenschaften float und clear waren eine der ersten Methoden zur Erstellung komplexer Layouts im Webdesign. Obwohl moderne Methoden wie Flexbox und Grid oft vorzuziehen sind, ist das Wissen über die Verwendung von float und clear immer noch wichtig, um mit veralteten Projekten zu arbeiten oder die Grundlagen von CSS zu verstehen.

Eigenschaft float

Die Eigenschaft float ermöglicht es einem Element, nach links oder rechts zu "schweben" und von Text und anderen Elementen umflossen zu werden. Diese Eigenschaft ist besonders nützlich für die Erstellung von Layouts mit Spalten und das Umfließen von Bildern mit Text.

Syntax:

    
      .element {
        float: left; /* oder right */
      }
    
  

Werte der Eigenschaft float:

• left: Element schwebt nach links, nachfolgende Elemente umfließen es rechts
• right: Element schwebt nach rechts, nachfolgende Elemente umfließen es links
• none: Standardeinstellung, Element schwebt nicht
• inherit: erbt den Wert vom übergeordneten Element

Beispiel für die Verwendung von float:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="content">
        <p>This is some content that will wrap around the floated elements. The left floated element will be placed to the left, and the right floated element will be placed to the right.</p>
      </div>
    
  

7.2 Eigenschaft clear

Die Eigenschaft clear wird verwendet, um das Umfließen von schwebenden Elementen zu steuern. Sie verhindert, dass ein Element von schwebenden Elementen von einer bestimmten Seite umflossen wird.

Syntax:

    
      .element {
        clear: left; /* oder right */
      }
    
  

Werte der Eigenschaft clear:

• left: Element wird nicht von links umflossen
• right: Element wird nicht von rechts umflossen
• both: Element wird weder von links noch von rechts umflossen
• none: Standardeinstellung, Element wird von beiden Seiten umflossen

Beispiel für die Verwendung von clear:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .clear {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="clear">Cleared Element</div>
      <div class="content">
        <p>This content will not wrap around the floated elements because of the cleared element above.</p>
      </div>
    
  

Beispiel für die "clearfix"-Technik:

    
      .container::after {
        content: "";
        display: table;
        clear: both;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
      </div>
    
  

7.3 Vor- und Nachteile der Verwendung von float

Vorteile

1. Einfachheit der Nutzung:
   • Einfaches Erstellen von einfachen Layouts mit float
2. Breite Unterstützung durch Browser:
   • float wird von allen modernen Browsern unterstützt, einschließlich älterer Versionen
3. Flexibilität in Layouts:
   • Möglichkeit, verschiedene Layouts zu erstellen, einschließlich Textumfließen von Bildern und Erstellung mehrzeiliger Layouts

Nachteile

1. Schwierigkeiten bei der Verwaltung komplexer Layouts:
   • float kann Probleme bei der Erstellung komplexer Layouts verursachen, insbesondere wenn es um vertikale Ausrichtung geht
2. Probleme mit der Höhe von übergeordneten Elementen:
   • Übergeordnete Elemente können "zusammenbrechen", wenn alle ihre untergeordneten Elemente schweben. Dies erfordert die Verwendung von Techniken wie clearfix, um das zu beheben
3. Veraltung:
   • Moderne Methoden wie Flexbox und Grid bieten leistungsstärkere und flexiblere Möglichkeiten zur Erstellung von Layouts

Beispiel für die Erstellung eines Layouts mit float und clear

Erstellung eines zweispaltigen Layouts mit float und clear.

In diesem Beispiel wird ein zweispaltiges Layout mit einer Seitenleiste (.sidebar) und Hauptinhalt (.main) erstellt. Die Elemente .sidebar und .main schweben nach links, und das .footer-Element mit clear: both; verhindert das Umfließen.

    
      .container {
        width: 100%;
      }

      .sidebar {
        float: left;
        width: 25%;
        background-color: lightblue;
        padding: 10px;
      }

      .main {
        float: left;
        width: 75%;
        background-color: lightgreen;
        padding: 10px;
      }

      .footer {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
        text-align: center;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer Content</div>
      </div>
    
  

Die Verwendung von float und clear bleibt ein wichtiges Werkzeug im Arsenal von Webentwicklern, trotz des Aufkommens modernerer Methoden. Das Verständnis ihrer Funktionsweise hilft bei der Unterstützung und Aktualisierung alter Projekte und der Erstellung einfacher Layouts. Moderne Methoden wie Flexbox und Grid sind oft vorzuziehen für die Erstellung komplexer und anpassungsfähiger Layouts, aber das Wissen über float und clear bleibt relevant.