css-technik.de
Auf dieser Seite kann man auch noch Weitergehendes zum Thema float nachschlagen.
Die meisten Leute finden das Thema "float" ziemlich Respekt einflößend. Die Theorie dahinter ist nicht leicht zu verstehen und außerdem sagt man, die Bugs seien zahlreich und fies. Aber fürchten Sie sich nicht, denn wir werden die einzelnen Konzepte, einige der Bugs und die praktischen Anwendungen des float-Elements in kleinen, leicht verständlichen Schritten nachvollziehen. Seien Sie versichert, dass Ihnen kein Schaden daraus entstehen wird. Im Gegenteil: vor Ihnen wird sich eine weite und völlig neue Welt der Positionierung öffnen. Ans Werk!
Grundlegende Eigenschaften Jedes Element kann "floaten": Absätze, <div>, Listen, Tabellen, Grafiken und selbst Inline-Elemente wie <span> oder <strong>. Jedes Element, das man floatet, wir dadurch automatisch zu einem Block-Element. Das bedeutet, dass man ihm sowohl eine Breite (width) als auch eine Höhe (height) zuweisen kann. Tatsächlich müssen Floats sogar eine zugewiesene Breite haben. Diese wegzulassen, ist ein häufig gemachter Fehler und während das manche Browser verzeihen, stolpern all diejenigen Browser darüber, die sich auf Webstandards besser verstehen. Ohne die Breitenangabe könnte das gefloatete Element entweder so breit sein wie sein Inhalt oder aber wie sein Elternelement. Die Browser müssen sich erst noch einigen, welche Interpretation die richtige ist und auch das W3C diskutiert offenbar noch über dieses Thema.
. Ein verbreitetes Problem mit gefloateten Elementen ist, wie man den Text, der entlang des Floats fließt, davon abhält, die Seiten des Floats zu berühren. Es funktioniert nicht, dem Text Polsterung (padding) oder Rand (margin) zuzuweisen, weil diese Eigenschaften auf der linken Seite der Zeilenbox zum tragen kommen und die befindet sich ja hinter dem gefloateten Element. Die richtige Vorgehensweise ist, dem Float selbst einen Rand zu geben und dadurch die Zeilenboxen davon zu überzeugen, dass das gefloatete Element "größer" ist, als es erscheint. Dadurch werden die Zeilenboxen verkürzt und ein Abstand entsteht. Die meisten Float-Elemente haben einen solchen Rand nur auf derjenigen Seite, die dem Text zugewandt ist sowie auf ihrer Unterseite. Das Float-Element im Screenshot oben hat einen kleinen Rand auf seiner rechten Seite.
Absatz ausserhalb des Floats.
Die meisten Leute finden das Thema "float" ziemlich Respekt einflößend. Die Theorie dahinter ist nicht leicht zu verstehen und außerdem sagt man, die Bugs seien zahlreich und fies. Aber fürchten Sie sich nicht, denn wir werden die einzelnen Konzepte, einige der Bugs und die praktischen Anwendungen des float-Elements in kleinen, leicht verständlichen Schritten nachvollziehen. Seien Sie versichert, dass Ihnen kein Schaden daraus entstehen wird. Im Gegenteil: vor Ihnen wird sich eine weite und völlig neue Welt der Positionierung öffnen. Ans Werk!
Grundlegende Eigenschaften
Jedes Element kann "floaten": Absätze, <div>s, Listen, Tabellen, Grafiken und selbst Inline-Elemente wie <span> oder <strong>.
Jedes Element, das man floatet, wir dadurch automatisch zu einem Block-Element. Das bedeutet, dass man ihm sowohl eine Breite (width) als auch eine Höhe (height) zuweisen kann. Tatsächlich müssen Floats sogar eine zugewiesene Breite haben. Diese wegzulassen, ist ein häufig gemachter Fehler und während das manche Browser verzeihen, stolpern all diejenigen Browser darüber, die sich auf Webstandards besser verstehen. Ohne die Breitenangabe könnte das gefloatete Element entweder so breit sein wie sein Inhalt oder aber wie sein Elternelement. Die Browser müssen sich erst noch einigen, welche Interpretation die richtige ist und auch das W3C diskutiert offenbar noch über dieses Thema.
Floats sind aus dem Fluss der HTML-Elemente herausgenommen. Aber im Gegensatz zu absolut positionierten Elementen, werden Floats direkt nach dem letzten vorausgehenden Block-Element angeordnet (genau wie nicht gefloatete Block-Elemente). Wenn sich ein Float innerhalb einer Zeilenbox befindet, wird die Oberkante des Floats auf eine Höhe mit der Oberkante der Zeilenbox gesetzt. Abgesehen von diesen beiden Eigenschaften, haben Floats große Ähnlichkeit mit absolut positionierten Elementen, denn beide werden von "normalen" Blockboxen völlig ignoriert. Diese statisch angeordneten, (= "normalen") Blockboxen werden in ihrem Fluss eine nach der anderen so angeordnet, als ob die Floats gar nicht vorhanden wären.