float: Element umfließen lassen

0 | 23761 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "float: Element umfließen lassen" mit Ihrem Wissen!

Anzeige Hier werben

float

Werte: left, right, none
Standardwert: none
Vererbung: -
Kurzschreibweise: keine
Anwendbar auf: Blocklevel- und Inline-Elemente
CSS-Level: CSS1, CSS2.1, CSS3

Diesem Referenzeintrag sollte noch hinzufügt werden:

  • Browserfehler (IE floating bug wo irgendwas verschwindet, gibts noch andere?)
  • Beispiel(Anwendung) wie man mit Float bilder nebeneinander ausrichten kann (und was das für vorteile hat gegenüber tabellen(flexible anzahl von bildern pro seite))
  • Links auf seiten die erklären, wie man ein ganzes layout mit float macht
  • Beispiel mit <style></style> übersichtlicher machen
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
float

Mit float können sie für einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen.

Bild zu float: Element umfließen lassen
Grafisches Beispiel für float

float wird sehr oft verwendet, um Layouts zu gestalten. Dabei kann die Eigenschaft dazu verwendet werden um Blockelemente nebeneinander zu positionieren, in dem sie sich gegenseitig umfließen. So kann beispielsweise ein klassischer, mehrspaltiger Seitenaufbau ohne große Probleme realisiert werden. Hierbei ist es sinnvoll seine Elemente mit dem Textfluss - von oben nach unten, von links nach rechts - anzuordnen und sie anschließend mit float und clear an die richtigen Stellen zu bringen. Trotz des Umfließens werden Abstände eingehalten, so dass die Elemente passgenau angeordnet werden können. Hierbei hilft es sich das Boxmodell vorzustellen.

Werte

Wert
Bedeutung
left
Das Element wird auf der linken Seite ausgerichtet.
Nachfolgende Elemente umfließen es rechts.
right
Das Element wird auf der rechten Seite ausgerichtet.
Nachfolgende Elemente umfließen es links.
none (Standardwert)
Die folgenden Elemente umfließen nicht das Element

Beispiel

Beispiel mit 4 boxen zu float  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div style="width:500px; border:1px #000 solid; line-height:18px;">
  <div style="float:left; width:96px; height:300px; border:1px #FF0 solid; margin:2px; background:#FFFF9B;">
    1. Box mit float:left
  </div>
  <div style="float:left; width:96px; height:200px; border:1px #00F solid; margin:2px; background:#9B9BFF;">
    2. Box mit float:left
  </div>
  <div style="float:left; width:96px; height:100px; border:1px #F00 solid; margin:2px; background:#FF9B9B;">
    3. Box mit float:left
  </div>
  <div style="float:right; width:96px; height:100px; border:1px #0F0 solid; margin:2px; background:#9BFF9B;">
    1 Box mit float:right;
  </div>
  Dieser Blindtext umflie&szlig;t die Boxen in den diversen H&ouml;hen. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  <br style="clear:left;" />
</div>

Verwandte Artikel


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "float: Element umfließen lassen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "float: Element umfließen lassen" hier bearbeiten.

Mitarbeiter
  • Ich bin Schüler eines Gymnasiums und beschäftige mich in meiner Freizeit seit vielen Jahren mit HTML- und CSS-Programmierung. Außerdem interessiere ich mich für PHP (WordPress, Drupal, ...), Ruby und Ruby on Rails.
  • arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Kinderturnen - Sport Spiele für Kinder