Float Container Clearing

Clearing Floats die altmodische Art und Weise

Bei reinen CSS generierten Layouts benötigen wir oft mehr als eine Spalte.Wünschenswert ist das diese nach Möglichkeit auch unten am Fuß der Seite abschließen. Wenn  wir float  für einen Textcontainer einsetzen taucht immer wieder das Problem auf, das dieser nicht weit genug nach unten geht. Je nach Browser haben wir nie einen richtigen Abschluß zum Fuß der Seite. Oft habe ich das Web durchsucht,nie das richtige gefunden und dann eine Lösung und den besten Ansatz auf der  Seite Clearing Floats  gefunden. Schon zig mal aus den  Bookmarks verloren, habe ich beschlossen die Inhalte in meine Webseite  zu intergrieren btw. sie in Kurzform zu beschreiben. Dann finde ich sie schneller!

Ein Float Conainer (Schwimmer) ist in einem Container-Box mit einer sichtbaren Grenze oder mit einem Hintergrund, der aber nicht immer(je nach Browser) automatisch unten auf der Seite abschließt. Es gibt die Möglichkeit das mit einem Javascript zu erreichen, was aber auch nicht alle Browser darstellen,zumindest wenn der User das das in seinem Browser abgeschaltet hat.

Das W3C schlägt vor, mit einem "gelöscht" ein clear Kommando einzufügen. Gut beschrieben  CSS Float Theorie

{clear: both;}.. Wir sagen, dass Sie die folgenden Feld die eindeutige Eigenschaft, (klar: beide;).Was dies tut, ist, die Marge am oberen Rand des geräumte Feld, drücken Sie ihn nach unten, bis es "löscht" im unteren Bereich. Das machen aber nicht alle Browser ganz sauber.

  <! - Float-Container ->

<div style="float:left; width:30%;">

<p>Inhalt</p>

</div>

<div Style="float:left; width:30%">

<p> Einige Inhalte </ p> </ div>

<p>Text nicht als Float deklariert</p> <p> Text nicht in der float </ p>

<div style="clear:both;"> </div> <div Style="clear:both;">

</ div>

</div>

</div>

Neu in CSS ist die Verwendung von :after also :nach und dann die CSS Klasse .clearfix:after

Wie benutzen wir nun :after

Diese CSS2 Eigenschaft ermöglicht es, zusätzlichen Inhalt nach einem Element einzufügen, ohne dass zusätzliches Markup im HTML-Code benötigt wird. Der Inhalt wird in der CSS-Datei angegeben und erscheint auf der Seite, als wäre er ein wirkliches HTML-Element. Solch ein durch :after erzeugter Inhalt ist für manche CSS Eigenschaften nicht erreichbar, darunter "position", "float", Listen- und Tabelleneigenschaften. Allerdings ist die Eigenschaft "clear" zugelassen.

Angenommen man benutzt :after um ein einfaches Zeichen wie "Punkt" einzufügen und weist dann diesem erzeugten Element  {clear: both;}  zu. Das ist alles, was man zur Ausführung benötigt, da aber keiner einen Zeilenabstand am Ende des Containers möchte, benutzt man außerdem  {height: 0;}  und  {visibility: hidden;}  um den "Punkt" unsichtbar zu machen.

Sähe dann im CSS so aus:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/ * html

.clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

Das ganze funktioniert im IE und Mac toll, in den Gecko Browsern gibt es ein Problem wenn andere CSS Container nicht gefloatet sind.Da wir aber von reinen CSS Layouts ausgehen dürfte das nicht das Problem sein.

Eine sehr übersichtlich und Top Aktuelle Ansicht und Beschreibung bei YAML