CSS - wie wird man die Eigenschaft float wieder los? Ein Trick.
Um HTML Elemente horizontal gegeneinander anzuordnen, also links und rechts nebeneinander, kann man die CSS-Formatierungen
- float: left
- float: right
verwenden. Werden HTML Elemente mit diesen Eigenschaften versehen muss man nach dem letzten Element mit einer "Float-Eigenschaft" das Floaten wieder aufheben.
Um die Eigenschaft des Floatens eines floatenden HTML-Elementes aufzuheben kann man diese CSS-Formatierungen
- clear: left
- clear: right
- clear: both
verwenden. Um dies Anwenden zu können muss es also nach dem letzten floatenden HTML-Element ein Element geben dem man eine der 3 clear-Formatierungen zuweist.
Dummi-HTML-Element
In der Regel oder sehr oft wird dafür ein sogenanntes Dummi-HTML-Element verwendet.
Dieses Dummi-HTML-Element ist im ungünstigen Fall ein br Tag oder ein span Tag. Ungünstig sind diese beiden Tags deswegen weil sie Fonteigenschaften erben bzw. besitzen. Deswegen hat ein br Tag oder ein span Tag immer eine gewisse Zeilenhöhe. Damit nun dieses Dummi-HTML-Element keine unerwünschten Abstand erzeugt muss es noch zusätzlich bezüglich seiner Höhe formatiert werden.
Diese zusätzliche Formatierung kann man umgehen wenn man als Dummi-HTML-Element das div Tag verwendet. Denn ein leeres div Tag hat keine Höhe.
Mit einem div-Tag als Dummi-HTML-Element um Floaten aufzuheben ist man eigentlich am Ziel angelangt.
Aber,
mit einem div-Tag als Dummi-HTML-Element kann es unter bestimmten Vorraussetzung Probleme geben. Um diese Probleme zu umgehen bleibt nur eine Möglichkeit:
Kein Dummi-HTML-Element verwenden.
Der Trick
Der Trick, um die Eigenschaft des Floatens eines floatenden HTML-Elementes aufzuheben besteht darin, kein Dummi-HTML-Element mit einer clear-Formatierung zu verwenden. Mit anderen Worten, man benötigt die CSS Formatierungen
- clear: left
- clear: right
- clear: both
nicht um Floaten aufzuheben.
Statt dessen wird ein div verwendet welches die floatenden HTML-Elemente umschliesst. Diesem div muss man explizit die CSS-Formatierung
display: block
zuweisen. Das ist der Trick und das ist Alles.
Demo, Test mit div und display: block
Ich bin das umschliessende div und bin mittels der CSS-KLasse "clear-block" mit display: block formatiert.
float: left
float: right
Dieser Trick funktioniert nur wenn man dem umschliessenden div die Formatierung über eine CSS-Klasse zuweist.
Bei einigen Themes wird für genau diese Zuweisung die CSS-Klasse "clear-block" bereitgestellt. Wenn man sich in der CSS-Datei eines solchen Theme diese Formatierung ansieht:
.clear-block {
display: block;
}Zufällig verwendet das von DrupalCenter benutzte Zen Theme diese CSS-Klasse. Aus diesem Grund funktioniert mein obiges Demo des Trick hier auf dieser FAQ Seite.
Anwendungsszenario
Erlaubt man Usern beim Erstellen von Inhalten mit dem Eingabeformat Full HTML zu arbeiten kann man das div welches den Inhalt der Node umfasst vorsorglich mit der CSS-Formatierung display: block versehen. Damit verhindert man das sich durch nicht aufgehobenes Floaten von HTML-Elementen das gesamte Layout der Seite verschiebt sondern sich Verschiebungen nur im Bereich des eigentlichen Nodeinhaltes ereignen.
Fazit
Schlussendlich bleibt anzumerken, das es nicht wenige Drupal-Modulentwickler gibt die diese Anwendungsmöglichkeit von display: block im Zusammenhang mit flotenden HTML-Elementen scheinbar nicht kennen.
-------------
quiptime
- Anmelden oder Registrieren um Kommentare zu schreiben
Verzeih, wenn ich deinen Beitrag ein wenig korrigiere.
am 16.12.2008 - 09:34 Uhr
Dies ist leider nicht alles. Die Methode des einschließen von Floats ohne zusätzliches Markup wurde 2004 von Position Is Everything dokumentiert (Big John, Holly Bergevin) und nennt sich easyclearing. Ins deutsche übersetzt wurde sie 2005 von Catherine und Onno K. Gent. Drupal selbst nutzt diese Methode in der CSS-Datei modules/system/defaults.css. Das Zen-Theme setzt nur darauf auf.
/* für alle modernen Browser */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* für den IE5/Mac und hasLayout für IE7 */
.clearfix {display: inline-block;}
/* Verstecken vor dem IE/Mac, hasLayout für IE5+6 erzwingen \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* Ende des Verstecken */
/* Trotz des Überschreibens der Eigenschaft display, bleibt das Layout für den IE erhalten. */
.clear-block:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear-block {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clear-block {
height: 1%;
}
.clear-block {
display: block;
}
/* End hide from IE-mac */
Ein einfaches display:block hat also nicht die erklärte Wirkung, sondern das Zusammenspiel der Komponenten, welches sich in der Klasse clear-block äußert.
Dein Fazit würde ich dem zu folge ein wenig ändern.
height:1%durchzoom:1ersetzt. Damit wird der IE5.0 nicht mehr unterstützt, da zoom erst ab IE-Version 5.5 funktioniert. Der Grund für die Umstellung dürfte sein, dassheight:1%in Verbindung mitoverflow:hiddenzu starken Problemen führen kann.overflow:auto;bzw.overflow:hidden;mit auf den Weg geben. Beispiel:.div_mit_float_elementen {overflow: hidden;
width: 100%;
}