Alle Elemente, die auf einer HTML-Seite erscheinen, sind nichts anderes als Rechtecke. Und im Grunde nur zwei Arten:
- Blöcke (blok), die dort, wo sie sich befinden, die gesamte Breite einnehmen und von dem, was sich über und unter ihnen befindet, getrennt sind. Dies sind beispielsweise DIV-, P- und H-Tags.
- integriert (inline). Zum Beispiel SPAN, STRONG, EM, A und IMG.
Tische.
Die Rolle der Eigenschaft nahm nach dem Übergang vom Tabellenlayout zum Div-Layout zu. Dies liegt daran, dass Float es einem Webentwickler ermöglicht, Spalten einzuschließen, ohne auf eine Tabelle zurückgreifen zu müssen. Es kann Werte annehmen Rechts, links, aber nicht Center.
Zuvor erfolgte das Seitenlayout mit Tische.
Die Rolle der Float-Eigenschaft nahm nach dem Übergang vom Tabellenlayout zum Div-Layout zu. Dies liegt daran, dass Float es einem Webentwickler ermöglicht, Spalten einzuschließen, ohne auf eine Tabelle zurückgreifen zu müssen. Es kann Werte annehmen Rechts, links, aber nicht Center.
Verwenden der display:block;-Eigenschaft oder Anzeige: inline; Wir konvertieren einen Rechtecktyp in einen anderen. Beispielsweise kann eine UL-Liste mit mehreren LI-Blöcken horizontal angeordnet werden:
- ABSATZ
- ABSATZ
- ABSATZ
- ABSATZ
- ABSATZ
- ABSATZ
Bei Verwendung der Float-Eigenschaft ist das Rechteck blockförmig, allerdings mit einer Besonderheit: Seine Breite erstreckt sich nicht über den gesamten Inhalt. Ein h3-Header sieht beispielsweise so aus:
das ist HEADER h3
Wenn wir die Eigenschaft display:inline; setzen, sehen wir, dass sich nicht nur die Breite geändert hat, sondern auch der Abstand oberhalb und unterhalb des Elements:das ist HEADER h3
Aber wenn ich das Element rechts platzieren und dieses Mal text-align:right; hinzufügen möchte, dann erhalten wir:das ist HEADER h3
Und ganz anders ist es, wenn float:right;. Bitte beachten Sie, dass der Abstand oberhalb und unterhalb des Elements unverändert bleibt:das ist HEADER h3
Wie verhalten sich die Elemente neben dem Titel?Top-text bleibt unverändert, da ein schwebendes Element nicht über der Zeile positioniert werden kann, auf der es erstellt wurde.
das ist HEADER h3
Der rote Text befindet sich jedoch unter dem Titel und wird um diesen herum umbrochen, ohne dass zusätzliche Stile erforderlich sind. Und nur die Höhe von h3 wird überwunden, die Seite kehrt in ihre natürliche Ordnung zurück.
A B C D Mehrere schwebende Elemente folgen der Reihenfolge ihrer Position. ABING Text...
Und die Ausrichtung erfolgt am äußersten unteren Rand der Buchstaben, die sich auf derselben Seite befinden.
A B C D Wenn wir so gehen, dass die Strömung um das Element ab einem bestimmten Moment (von hier aus) stoppt, Die Clear-Eigenschaft wird angewendet. Wir können es zu einem leeren Tag hinzufügen
Um mehrere Blockrechtecke gleichmäßig zu platzieren, geben wir ihnen die gleiche Breite.
Das tabellarische Layout ist sehr praktisch und verständlich, weshalb wahrscheinlich die analoge Anzeige: Tabelle; erschien. Die gleiche Form wird mit weniger Code erhalten.
Jetzt können Sie sehen, wie die Bildergalerie aufgebaut ist. Ich hoffe, niemand hat es vergessen.
Text...
Text...
Links zu Quellen:
Float ist eine CSS-Eigenschaft zur Positionierung von Elementen. Um seinen Zweck und Ursprung zu verstehen, können Sie sich dem Druckdesign zuwenden. In einem Drucklayout können Bilder so auf der Seite positioniert werden, dass der Text um sie herum „fließt“. Dies wird üblicherweise als „Textumbruch“ bezeichnet.
In Seitenlayoutprogrammen können Elemente mit Text Bilder sowohl berücksichtigen als auch ignorieren. Wenn sie ignoriert werden, erscheint der Text über den Bildern, als ob er nicht vorhanden wäre. Dies ist der Hauptunterschied zwischen der Frage, ob Bilder Teil des Hauptflusses der Seite sind oder nicht. Webdesign ist sehr ähnlich.
Im Webdesign verhalten sich Seitenelemente mit der Float-Eigenschaft genau wie gedruckte Bilder, wenn Text um sie herum „fließt“. Solche Elemente sind Teil des Hauptflusses der Webseite. Anders verhält es sich jedoch, wenn Elemente eine absolute Positionierung verwenden. Absolut positionierte Elemente werden aus dem Hauptfluss der Seite entfernt, ähnlich wie im obigen Beispiel, wo beim Drucken von Text Bilder ignoriert werden. Solche Elemente haben keinen Einfluss auf die Position anderer Elemente, unabhängig davon, ob sie sich berühren oder nicht.
Das Festlegen der Float-Eigenschaft funktioniert folgendermaßen:
#sidebar ( float: rechts; )
Für die Float-Eigenschaft gibt es insgesamt 4 Werte. Links und rechts werden für entsprechende Richtungen verwendet. Keine (Standard) – stellt sicher, dass das Element nicht schwebend ist. Und inherit , was besagt, dass das Verhalten mit dem des übergeordneten Elements identisch sein sollte.
Wofür kann Float verwendet werden?
Float kann nicht nur zum Umschließen von Bildern mit Text verwendet werden, sondern auch zum Erstellen des Layouts einer gesamten Website.
Die Float-Eigenschaft ist auch in kleinerem Maßstab nützlich. Betrachten Sie beispielsweise einen kleinen Bereich auf einer Website-Seite. Nehmen wir an, Sie verwenden Float für Ihren Avatar. Wenn Sie die Bildgröße ändern, wird die Textgröße an das Bild angepasst.
Die gleiche Anordnung von Objekten kann durch Positionierung erreicht werden. Dem Containerobjekt wird eine relative Positionierung zugewiesen, und dem Bildobjekt wird eine absolute Positionierung zugewiesen. In diesem Fall hat der Avatar keinen Einfluss auf die Position des Textes.
Deaktivieren der Float-Eigenschaft
Für Float ist die zugehörige Eigenschaft klar. Jedes Element, für das die Eigenschaft „clear“ festgelegt ist, wird nicht wie erwartet nach oben verschoben, sondern unterhalb der Float-Elemente angezeigt. Vielleicht erklärt ein Beispiel in einem Bild es besser als Worte.
Im Beispiel ist die Seitenleiste nach rechts verschoben (float: right;) und ihre Höhe ist geringer als die des Hauptinhaltsbereichs. Daher wird die Fußzeile höher angehoben, da sie über genügend Höhe verfügt und das Float-Verhalten dies erfordert. Um die Situation zu beheben, muss die Eigenschaft „clear“ festgelegt werden, die sicherstellt, dass das Element unter Float-Elementen angezeigt wird.
#footer (klar: beide;) 
Die Eigenschaft „clear“ kann vier Werte haben. Beide, die am häufigsten verwendeten, werden verwendet, um das Schweben in jede Richtung aufzuheben. Links und rechts – werden verwendet, um das Schweben einer der Richtungen aufzuheben. Keine – Standardeinstellung, wird normalerweise nicht verwendet, es sei denn, dies ist erforderlich. inherit wäre der fünfte Wert, wird aber seltsamerweise nicht unterstützt Internet Explorer. Das Aufheben nur eines linken oder rechten Floats ist weitaus seltener, hat aber sicherlich seinen Zweck.
Großer Zusammenbruch
Eine weitere erstaunliche Sache an der Eigenschaft float ist, dass ihre Verwendung Auswirkungen auf das übergeordnete Element haben kann. Wenn ein solches Element nur Float-Elemente enthält, dann kollabiert es buchstäblich, das heißt, seine Höhe ist Null. Dies fällt nicht immer auf, es sei denn, das übergeordnete Element verfügt über einen sichtbaren Hintergrundsatz.
Dieser Zusammenbruch scheint unlogisch, aber die Alternative ist noch schlimmer. Betrachten Sie dieses Beispiel:
Wenn das Blockelement oben automatisch erweitert wird, um alle Float-Elemente aufzunehmen, entsteht im Text zwischen den Absätzen eine unnatürliche Lücke, die nicht behoben werden kann. Wenn dies der Fall wäre, würden sich unsere Designer viel häufiger über dieses Verhalten als über den Zusammenbruch beschweren.
Daher ist das Zusammenklappen fast immer notwendig, um Layoutschwierigkeiten vorzubeugen. Um dieses Verhalten zu ändern, müssen Sie nach den Float-Elementen, aber vor dem Schließen des übergeordneten Elements ein Float-Aufhebungselement hinzufügen.
Möglichkeiten, Float abzubrechen
Wenn Sie wissen, dass nach Float-Elementen immer ein anderes Element (z. B. eine Fußzeile) angezeigt wird, müssen Sie nur die Eigenschaft klar setzen: Both; , wie im obigen Beispiel, und machen Sie weiter Ihr eigenes Ding. Dies ist ideal, da keine Hacks oder zusätzlichen Elemente erforderlich sind. Natürlich läuft nicht alles in unserem Leben so reibungslos und es gibt Zeiten, in denen diese Methode nicht ausreicht. Daher ist es notwendig, mehrere zu haben zusätzliche Möglichkeiten in deinem Arsenal.
- Leere div-Methode. Es wird ein buchstäblich leeres Div verwendet. . Manchmal kann an seiner Stelle ein Element verwendet werden
oder was auch immer, aber div wird am häufigsten verwendet, weil es standardmäßig keinen Stil und keinen besonderen Zweck hat und es unwahrscheinlich ist, dass über CSS ein allgemeiner Stil darauf angewendet wird. Fans von semantisch reinem Markup mögen diese Methode möglicherweise nicht, da das Vorhandensein eines leeren Div keine kontextbezogene Bedeutung hat und nur aus Designgründen auf der Seite platziert wird. Streng genommen haben sie natürlich recht, aber er macht seinen Job und schadet niemandem. - Überlaufmethode. Basierend auf der Tatsache, dass das übergeordnete Element die Überlaufeigenschaft festlegen muss. Wenn diese Eigenschaft auf „auto“ oder „hidden“ gesetzt ist, wird das übergeordnete Element erweitert, um alle Float-Elemente aufzunehmen. Diese Methode sieht semantisch korrekter aus, da sie keine zusätzlichen Elemente erfordert. Wenn Sie jedoch nur für diesen Ansatz ein anderes Div verwenden würden (d. h. das übergeordnete Div), wäre es dasselbe wie im vorherigen Beispiel, mit dem Hinzufügen eines leeren Div. Denken Sie auch daran, dass die Overflow-Eigenschaft einen anderen Zweck hat. Seien Sie vorsichtig und lassen Sie nicht zu, dass einige Ihrer Inhalte verschwinden oder unnötige Bildlaufleisten angezeigt werden.
- Einfache Reinigungsmethode. Diese Methode verwendet ein wunderbares Pseudo CSS-Selektor- :nach. Viel besser als die Verwendung eines Überlaufs für das übergeordnete Element. Sie geben ihm einfach eine zusätzliche Klasse, die wie folgt deklariert wird: .clearfix:after ( Inhalt: „.“; Sichtbarkeit: versteckt; Anzeige: Block; Höhe: 0; klar: beide; ) Diese Methode fügt unsichtbaren Inhalt hinzu und bricht Float ab Und das ist übrigens nicht die ganze Geschichte darüber, wie zusätzlicher Code sollte in älteren Browsern verwendet werden.
Und wie Sie wissen, wird jede Methode in unterschiedlichen Situationen verwendet. Nehmen wir zum Beispiel ein Raster aus Blockelementen unterschiedlichen Typs.
Zum Besseren visuelle Darstellung Es wäre schön, ähnliche Blöcke zu kombinieren. Beispielsweise möchten wir, dass jeder Typ in einer neuen Zeile beginnt. In unserem Fall wird der Elementtyp durch die Farbe bestimmt. Wir können die Überlaufmethode oder die „einfache Löschmethode“ verwenden, wenn jede Gruppe ihr eigenes Containerelement hat. Oder wir können die leere div-Methode zwischen jeder der Gruppen verwenden. Drei Containerelemente oder drei leere Divs, was für Ihre Aufgabe besser ist, liegt bei Ihnen.
Probleme mit Schwimmern
Menschen versuchen oft, Floats zu umgehen, weil mit ihnen sehr sorgfältig gearbeitet werden muss. Die meisten Fehler kamen mit IE6. Da immer mehr Webdesigner die Unterstützung von IE6 einstellen, machen Sie sich über diese Probleme möglicherweise keine Sorgen. Aber für diejenigen, die sich dafür interessieren, hier ist eine kurze Liste.
Alternativen zum Floaten
Wenn Sie Text benötigen, der ein Bild umschließt, gibt es keine Alternative. Aber für das Seitenlayout gibt es definitiv Möglichkeiten. Es gibt einige sehr interessante Ansätze, die die Flexibilität von Float mit der Kraft der absoluten Positionierung kombinieren. CSS3 hat etwas namens Vorlagenlayoutmodul, was in Zukunft eine würdige Alternative zum Float darstellen wird.
Als Entwickler vor ein paar Jahren erstmals damit begannen, auf tabellenloses HTML-Markup umzusteigen, spielte die CSS-Eigenschaft float plötzlich eine sehr wichtige Rolle. Der Grund, warum die Float-Eigenschaft so verbreitet wurde, lag darin, dass Blockelemente standardmäßig nicht in einem spaltenbasierten Format nebeneinander angeordnet waren. Da in praktisch jedem CSS-Schema Spalten erforderlich sind, ist diese Eigenschaft mittlerweile zur Gewohnheit geworden – und wird sogar missbraucht.
Eigentum float in CSS ermöglicht es dem Entwickler, tabellenartige Spalten einzuschließen HTML-Markup ohne Tabellen zu verwenden. Wenn da nicht die Immobilie wäre schweben, dann wären CSS-Layouts nicht anders möglich als die Verwendung absoluter und relativer Positionierung – was schlampig wäre und das Layout nicht mehr wartbar machen würde.
In diesem Artikel verraten wir es Ihnen Was ist eine Immobilie? schweben und wie es Elemente in bestimmten Kontexten beeinflusst. Wir werfen auch einen Blick auf einige der Unterschiede, die bei dieser Eigenschaft in den am häufigsten verwendeten Browsern auftreten können. Abschließend werden wir einige davon demonstrieren praktische Anwendungen Eigenschaften schweben. Dies sollte auch eine umfassende und gründliche Diskussion dieser Eigenschaft und ihrer Auswirkungen auf die CSS-Entwicklung bieten.
Definition und Syntax der CSS-Float-Eigenschaft
Der Zweck der Float-Eigenschaft besteht darin, ein Blockelement nach links oder rechts zu verschieben und es so aus dem Dokumentfluss zu entfernen. Dadurch kann der aktuelle Inhalt auf natürliche Weise um das schwebende Element herum zusammengeklappt werden. Dieses Konzept ähnelt dem, was man jeden Tag in gedruckter Literatur sieht, wo Fotos und andere grafische Elemente an einer Seite ausgerichtet sind und der Inhalt (normalerweise Text) auf natürliche Weise um das am linken oder rechten Rand ausgerichtete Element fließt.
Das Bild oben zeigt den Abschnitt „Leser“ der Website des .net-Magazins mit drei Leserfotos, die linksbündig in ihren Spalten angeordnet sind und von Text um die Bilder umschlossen werden. Dies ist die Grundidee hinter der Float-Eigenschaft in CSS-Layouts und demonstriert eine der Techniken, die beim tabellarischen Design verwendet werden.
Die Wirksamkeit der Verwendung von Floats in mehrspaltigen Layouts wurde 2004 von Douglas Bowman in seiner klassischen Präsentation „No More Tables“ erläutert:
Bowman erläuterte die Prinzipien des tabellenlosen Layouts anhand einer alten Microsoft-Website als Referenz. Floats wurden in prominenter Weise bei seiner falschen Überarbeitung des Microsoft-Markups verwendet.
Syntax
Die Float-Eigenschaft kann einen von vier Werten annehmen: left, right, none und inherit. Dies wird wie im folgenden Code gezeigt deklariert:
#sidebar ( float: left; )
#sidebar ( schweben: links; |
Die am häufigsten verwendeten Werte sind links und rechts. Der Wert „none“ oder der anfängliche Float-Wert für jedes HTML-Seitenelement ist der Standardwert. Der inherit-Wert, der auf fast jede CSS-Eigenschaft angewendet werden kann, funktioniert in Versionen des Internet Explorers, einschließlich 7, nicht.
Für die Float-Eigenschaft muss keine andere Eigenschaft auf das Float-Element angewendet werden. Um jedoch ordnungsgemäß zu funktionieren, arbeitet Float unter bestimmten Umständen effizienter.
Normalerweise sollte ein schwebendes Element vorhanden sein Breite explizit festlegen(es sei denn, es handelt sich um ein ersetztes Element wie ein Bild). Dies stellt sicher, dass sich float wie erwartet verhält und hilft, Probleme in einigen Browsern zu vermeiden.
#sidebar ( float: left; width: 350px; )
#sidebar ( schweben: links; Breite: 350px; |
Merkmale schwebender Elemente
Im Folgenden finden Sie eine Liste des Verhaltens schwebender Elemente gemäß der CSS2-Spezifikation:
Ein links schwebender Block wird nach links verschoben, bis seine linke Kante (oder Kantengrenze, falls keine Kante vorhanden ist) entweder die Kante des Blockinhalts oder die Kante eines anderen schwebenden Blocks berührt
Wenn die Größe eines schwebenden Blocks den verfügbaren horizontalen Platz überschreitet, wird der schwebende Block nach unten verschoben
Nicht positionierte, nicht schwebende Blockelemente wirken wie schwebende Elemente, d. h. liegt außerhalb des Dokumentenflusses
Die Kanten eines schwebenden Blocks stimmen nicht mit den Kanten benachbarter Blöcke überein
Wurzelelement( ) kann nicht floaten
Ein Inline-Element, also ein schwebendes Element, wird in ein Blockelement umgewandelt
Schweben in der Praxis
Der häufigste Anwendungsfall für die Float-Eigenschaft besteht darin, ein Bild schweben zu lassen und es mit Text zu umschließen. Zum Beispiel:
Aenean ultricies mi vitae est. Mauris Placerat eleifend Löwe. Quisque sit amet est und sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis. Präsent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Das auf das Bild im Feld oben angewendete CSS sieht folgendermaßen aus:
img ( float: left; margin: 0 15px 5px 0; border: solid 1px #bbb; )
img( schweben: links; Rand: 0 15px 5px 0; Rand: fest 1px #bbb; |
Die einzige Eigenschaft, die diesen Effekt erzielen kann, ist die Float-Eigenschaft. Die anderen Eigenschaften (Rand und Rand) dienen ästhetischen Gründen. Andere Elemente im Block (Tags
Mit Text darin) sind keine Stile erforderlich.
Wie bereits erwähnt, werden schwebende Elemente aus dem Fluss des Dokuments verdrängt und andere Blockelemente bleiben im Fluss und verhalten sich so, als ob das schwebende Element gar nicht vorhanden wäre. Dies wird unten visuell demonstriert:
Dieses Feld wird nach links verschoben
Das
Das Element hat eine andere Hintergrundfarbe, um anzuzeigen, dass es sich über die Breite seines übergeordneten Elements erstreckt und das schwebende Element ignoriert. Dieser Inline-Text wird jedoch um die schwebende Box herum umbrochen.
Im obigen Beispiel
Es ist ein Element auf Blockebene und ignoriert daher das schwebende Element, das sich über die Breite des Containers erstreckt (abzüglich der Auffüllung). Alle nicht schwebenden Blockelemente verhalten sich ähnlich.
Der Text in einem Absatz ist inline, sodass er das schwebende Element umschließt. Der schwebende Block verfügt außerdem über Randoptionen, um ihn vom Absatz abzugrenzen und ihn so optisch sauberer zu machen, sodass das Absatzelement den schwebenden Block ignoriert.
Reinigungsschwimmer
Layoutprobleme mit Floats werden normalerweise gelöst mit CSS klare Eigenschaft, die es Ihnen ermöglicht, schwebende Elemente von links oder rechts oder von beiden Seiten zu „entfernen“.
Schauen wir uns ein Beispiel an, das häufig vorkommt: Die Fußzeile wird umbrochen rechte Seite 2-klonales Markup:
Die linke Spalte schwebte nach links
Wenn Sie sich die IE6- und IE7-Seite ansehen, werden Sie keine Probleme feststellen. Die linke und rechte Spalte sind vorhanden und die Fußzeile befindet sich unten. Aber in Firefox, Opera, Safari und Chrome werden Sie feststellen, dass die Fußzeile verschoben wird. Dies wird durch die Anwendung von Float auf die Spalten verursacht. Das ist korrektes Verhalten, obwohl es problematischer ist. Um dieses Problem zu lösen, verwenden wir die obige Clear-Eigenschaft relativ zur Fußzeile:
#footer (klar: beide;)
#Fusszeile ( Lösche beide; |
Das Ergebnis ist unten dargestellt:
Die linke Spalte schwebte nach links
Die rechte Spalte schwebte ebenfalls nach links
Die Eigenschaft „clear“ löscht nur schwebende Elemente. Wenn Sie also „clear: Both“ auf beide Spalten anwenden, wird die Fußzeile nicht nach unten verschoben, da es sich bei der Fußzeile nicht um ein schwebendes Element handelt.
Die Eigenschaft „clear“ löscht nur schwebende Elemente. Die Verwendung von „clear“ ist folgende: In beiden Spalten wird die Fußzeile nicht weggelassen, da es sich nicht um ein schwebendes Element handelt.
Verwenden Sie daher „clear“ bei nicht schwebenden Elementen und manchmal sogar bei schwebenden Elementen, um zu erzwingen, dass Seitenelemente ihre vorgesehenen Positionen einnehmen.
Behebung des Elternausfalls
Eines der häufigsten Merkmale des Float-Markups ist „leave-parent“. Dies wird im folgenden Beispiel demonstriert:
Pellentesque Bewohner morbi tristique Senectus et Netus et Malesuada Fames Ac Turpis Egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Beachten Sie, dass die Basis des schwebenden Bildes außerhalb seines übergeordneten Bildes erscheint. Das übergeordnete Element ist nicht vollständig erweitert, um ein schwebendes Bild aufzunehmen. Dies wird durch das verursacht, was wir zuvor besprochen haben: Das schwebende Element befindet sich außerhalb des natürlichen Flusses des Dokuments, obwohl alle Elemente des Blocks angezeigt werden, das schwebende Element jedoch nicht vorhanden ist. Dies ist kein CSS-Fehler, alles entspricht den CSS-Spezifikationen. In diesem Beispiel machen alle Browser dasselbe. Es sollte gesagt werden, dass in diesem Beispiel das Hinzufügen der Containerbreite das Problem im IE verhindern kann, aber es sollte das Problem auch für Firefox, Opera, Safari oder Chrome lösen.
Lösung 1: Schwimmer für Container
Der einfachste Weg, dieses Problem zu lösen, besteht darin, das übergeordnete Element zu schweben:
Pellentesque Bewohner morbi tristique Senectus et Netus et Malesuada Fames Ac Turpis Egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Jetzt lässt sich der Behälter erweitern, sodass alles hineinpasst untergeordnete Elemente. Leider funktioniert dieser Fix nur in einer begrenzten Anzahl von Fällen, da das schwebende übergeordnete Element möglicherweise unerwünschte Folgen für Ihr Layout hat.
Lösung 2: Zusätzliches Markup hinzufügen
Dies ist eine veraltete Methode, aber eine einfache Option. Fügen Sie einfach ein zusätzliches Element am Boden des Behälters hinzu und „reinigen“ Sie ihn. So sieht der HTML-Code nach der Implementierung dieser Methode aus:
XHTML
Pellentesque Bewohner morbi tristique Senectus et Netus et Malesuada Fames Ac Turpis Egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Pellentesque Bewohner morbi tristique Senectus et Netus et Malesuada Fames Ac Turpis Egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. |
Und als Ergebnis wird das CSS auf die neuen Elemente angewendet:
Clearfix ( klar: beides; )
Clearfix ( Lösche beide; |
Sie können dies auch über tun
Tag mit dem aktuellen Stil. In jedem Fall erhalten Sie das gewünschte Ergebnis: Der übergeordnete Container wird erweitert und schließt alle seine untergeordneten Container ein. Diese Methode wird jedoch nicht empfohlen, da sie Ihrem Markup nicht-semantischen Code hinzufügt.
Lösung 3: Das After-Pseudoelement
:after Pseudoelement fügt dem abgeschlossenen Element ein Element hinzu HTML-Seite. Diese Methode wird häufig zur Lösung von Float-Clearing-Problemen eingesetzt. So sieht das CSS aus:
Clearfix:after ( Inhalt: „.“; Anzeige: Block; Höhe: 0; klar: beide; Sichtbarkeit: versteckt; )
Clearfix:nach ( Inhalt : "." ; Bildschirmsperre; Höhe: 0; Lösche beide; Sichtbarkeit: verborgen; |
Die CSS-Klasse „clearfix“ gilt für alle Container, die Float-Kinder haben, und wird nicht um diese erweitert.
Diese Methode funktioniert jedoch nicht für Internet Explorer bis Version 7, daher müssen Sie für IE eine der folgenden Optionen verwenden:
Clearfix ( display: inline-block; ) .clearfix ( zoom: 1; )
Clearfix ( Anzeige: Inline-Block; Clearfix ( Zoom: 1; |
Abhängig von der Art des Problems haben Sie es mit einer von zwei Lösungen zu tun, die dieses Problem im Internet Explorer beheben. Bitte beachten Sie, dass es sich bei der Zoom-Eigenschaft nicht um eine Standardeigenschaft von Microsoft handelt und Ihr CSS daher ungültig wird.
Da das :after-Pseudoelement in IE6/7 nicht funktioniert, ist der Code etwas aufgebläht und knifflig, und es ist ein zusätzlicher Stil erforderlich, der nicht nur für IE gültig ist, daher ist dies bei dieser Lösung nicht der Fall der beste Weg, aber wahrscheinlich das Beste, was wir bisher gesehen haben.
Lösung 4: Überlaufeigenschaft
Der bei weitem beste und einfachste Weg, das Problem des übergeordneten Dropouts zu lösen, besteht darin, overflow:hidden oder overflow:auto zum übergeordneten Element hinzuzufügen. Es ist übersichtlich, leicht zu warten, funktioniert in fast allen Browsern und fügt kein unnötiges Markup hinzu.
Beachten Sie, dass ich in allen Browsern „fast“ gesagt habe. Dies liegt daran, dass es im IE6 nicht funktioniert. In vielen Fällen hat der übergeordnete Container jedoch eine festgelegte Breite, wodurch das Problem in IE6 behoben wird. Wenn der übergeordnete Container keine Breite hat, können Sie mit dem folgenden Code einen IE6-Einzelstil hinzufügen:
// Dieser Fix gilt nur für IE6 .clearfix ( height: 1%; overflow: sichtbar; )
// Dieser Fix ist nur für IE6 Clearfix ( Höhe: 1 %; Überlauf: sichtbar; |
In IE6 wird die Eigenschaft height fälschlicherweise als min-height behandelt, sodass der Container gezwungen wird, seine untergeordneten Elemente einzuschließen. Die Overflow-Eigenschaft wird dann wieder auf „sichtbar“ gesetzt, um sicherzustellen, dass der Inhalt nicht ausgeblendet oder durchgescrollt wird.
Der einzige Nachteil bei der Verwendung der Überlaufmethode (in jedem Browser) ist die Möglichkeit, dass der Inhalt des Elements Bildlaufleisten aufweist oder den Inhalt verbirgt. Wenn im übergeordneten Element Elemente mit negativen Rändern oder absoluter Positionierung vorhanden sind, werden diese ausgeblendet, wenn sie über das übergeordnete Element hinausgehen. Daher sollte diese Methode mit Vorsicht angewendet werden. Es sollte auch beachtet werden, dass Sie die Überlaufmethode definitiv nicht verwenden könnten, wenn das enthaltene Element eine bestimmte Höhe oder Mindesthöhe hätte.
Es handelt sich also nicht wirklich um eine einfache browserübergreifende Lösung dieses Problem. Aber fast jedes Problem der Schwimmerreinigung kann mit einer der oben genannten Methoden gelöst werden.
Verwandte Float-Fehler im Internet Explorer
Im Laufe der Jahre wurden zahlreiche Artikel online veröffentlicht, in denen es um Diskussionen ging Häufige Fehler im Zusammenhang mit Float im CSS-Markup. Es überrascht nicht, dass sie sich alle mit Problemen befassen, die speziell für den Internet Explorer gelten. Nachfolgend finden Sie eine Liste mit Links zu einer Reihe von Artikeln, die sich mit Float-bezogenen Themen befassen:
Ändern der Float-Eigenschaft mit JavaScript
um sich zu ändern CSS-Wert In JavaScript müssen Sie auf den Stil eines Objekts zugreifen, indem Sie die vorgesehene CSS-Eigenschaft in einen „Camel-Case“ umwandeln. Beispielsweise wird die CSS-Eigenschaft „margin-left“ zu „marginLeft“, die Eigenschaft „background-color“ wird zu „BackgroundColor“ und so weiter. Bei der Eigenschaft „float“ ist die Sache jedoch anders, da das Wort „float“ in JavaScript bereits reserviert ist. Daher wird Folgendes falsch sein:
Stil. styleFloat = "left" ;
// Für alle anderen Browser
myDiv. Stil. cssFloat = "left" ;
Praktische Verwendung von Float
Floats können verwendet werden, um eine Reihe von Problemen im CSS-Markup zu lösen. Einige Beispiele werden hier beschrieben.
2-spaltig, feste Breite
3 Spalten, gleichhohes Layout
Schwebendes Bild mit Titel.
Ähnlich wie wir zuvor in „Float in Practice“ besprochen haben, beschreibt Max Design, wie das Schweben eines Bilds mit einem Titel es ermöglicht, dass Text sich auf natürliche Weise um das Bild herum fließen lässt.
Horizontale Navigation mit ungeordneten Listen
Die Float-Eigenschaft ist eine Schlüsselkomponente beim Codieren von Sprite-basierten horizontalen Navigationsleisten. Chris Spooner von Line25 beschreibt die Entstehung von Menu of Awesomeness, das Tags enthält
Um die Bedeutung der Float-Eigenschaft in diesem Beispiel zu veranschaulichen, ist hier ein Screenshot desselben Bildes, nachdem Firebug zum Entfernen des Floats verwendet wurde: links:
Rasterbasierte Fotogalerien
Eine einfache Verwendung der Eigenschaft „float“ besteht darin, eine Reihe von Fotos in einer ungeordneten Liste mit „float:left“ zu hinterlassen, was zu demselben Ergebnis führt wie das, was Sie im Tabellen-Markup sehen würden.
Auf der Produktseite von Foremost Canada (siehe Bild oben) werden die Produkte in einem Rasterformat neben einer Seitenleiste angezeigt. Fotos werden für alle als ungeordnete Liste mit einer Float-Eigenschaft angezeigt
Die Futon-Seite von Paragon Furniture (siehe Bild oben) ist ein weiteres Beispiel für eine Produktseite, die eine ungeordnete Liste mit schwebenden Tags verwendet
Die Suchergebnisseite von iStockphoto (siehe Bild oben) verfügt über das gleiche Raster strukturierter Fotos, hier enthalten die Fotos float:left
Ausrichtung Felder mit einer Schaltfläche
Standard-Formularelementmodellierung für verschiedene Browser kann problematisch sein. Oft müssen Sie in ein Formularfeld, z. B. ein Suchformular, etwas eingeben Element neben der Schaltfläche „Senden“.
Beschreibung
Mit der CSS-Eigenschaft float können Sie ein Element schweben lassen, indem Sie es je nach eingestelltem Wert an den linken oder rechten Rand des übergeordneten Elements verschieben. Wenn für ein schwebendes Element keine explizite Breite festgelegt ist, wird die Breite komprimiert, damit es an den Inhalt passt.
Der Browser verarbeitet den Code HTML-Dokument Wenn die Codeverarbeitung von oben nach unten ein schwebendes Element erreicht, platziert der Browser es entsprechend dem Fluss des Dokuments zuerst, d. h. unterhalb des Elements, an dem es sich im Dokumentcode befindet, entfernt es dann das schwebende Element aus dem normalen Fluss und verschiebt es so weit wie möglich an den linken oder rechten Rand des übergeordneten Elements:
Da das schwebende Element aus dem Fluss des Dokuments entfernt wurde, werden die verbleibenden Blockelemente, die sich danach im Code befinden, an ihre Stelle verschoben, als ob das Element nie da gewesen wäre.
Auch wenn das schwebende Element aus dem normalen Fluss entfernt wurde, ist der Inline-Inhalt weiterhin betroffen. Im Gegensatz zu Blockelementen berücksichtigt Inline-Inhalt, der im Code nach einem schwebenden Element platziert wird, dessen Ränder und umschließt ihn, d. h. der Text wird um den schwebenden Block herum umbrochen:
Anstelle eines schwebenden Blocks mit Textinhalt können Sie auch ein schwebendes Bild erstellen. In diesem Fall wird der Text um das Bild herum umbrochen:
MIT mit CSS Float-Eigenschaften Das Bild wurde so gestaltet, dass es auf der linken Seite schwebt. Der im HTML-Code unter dem Bild befindliche Text umschließt das Bild an der rechten und unteren Seite.
Versuchen "
Sie können mehr als ein schwebendes Element in derselben Zeile platzieren, wenn die Breite des übergeordneten Elements dies zulässt. Wenn das übergeordnete Element nicht breit genug ist, werden schwebende Elemente, die nicht in eine Linie mit anderen schwebenden Elementen passen, nach unten gedrückt.
Schwebende Elemente haben keinen Einfluss auf die Höhe des übergeordneten Elements. Wenn also ein Container vorhanden ist und dieser nur schwebende Elemente enthält, ist die Höhe des Containers Null. Sie können dieses Problem auf folgende Weise lösen:
- Stellen Sie eine feste Höhe ein – in Fällen, in denen Sie wissen, wie hoch der Behälter sein soll.
- Wenden Sie die Überlaufeigenschaft mit dem Wert „auto“ oder „hiden“ auf den Container an, dann werden schwebende Elemente bei der Berechnung der Höhe des Containers berücksichtigt. Diese Methode kann verwendet werden, wenn nicht im Voraus bekannt ist, wie hoch der Behälter sein soll.
Die Float-Eigenschaft funktioniert nur bei Blockelementen. Wenn die Float-Eigenschaft also auf Elemente eines anderen Typs angewendet wird, werden diese in einen Blocktyp konvertiert.
Hinweis: Absolute und fest positionierte Elemente ignorieren die Float-Eigenschaft. Außerdem hat die Float-Eigenschaft keine Auswirkung auf Flexboxen.
Formatieren kaskadierender Tabellen). Diese Sprache existiert seit 1996 und entwickelt sich immer noch weiter. An dieser Moment Entwickler verwenden bereits die dritte Version von CSS. Mit der Programmiersprache CSS ist es möglich, eine rundum schöne und angenehme Website zu erstellen, die für den Benutzer weder veraltet noch unbequem erscheint, auch wenn Sie überhaupt kein JavaScript verwenden. Die modernen Möglichkeiten der dritten Version ermöglichen Ihnen dies.
Entwickler können auch praktischere Formatierungsoptionen wie Flexbox oder Position verwenden, um die Position eines Elements auf der Website zu ändern, aber das Wichtigste zuerst. Zunächst sollten Sie die Vor- und Nachteile der Float-Eigenschaft verstehen.
CSS Float – warum wird es benötigt?
Float ist eine Eigenschaft zum Positionieren von Elementen. Jeden Tag ist es auf den Seiten von Zeitungen und Zeitschriften zu sehen, wenn man die Bilder und Texte betrachtet, die sehr ordentlich um sie herum fließen. In der Welt des HTML- und CSS-Codes sollte dasselbe passieren, wenn die Float-Funktion verwendet wird. Es sei jedoch daran erinnert, dass die Bildbearbeitung nicht immer der Hauptzweck dieser Funktion ist. Es kann verwendet werden, um eine beliebte Anordnung von Site-Elementen in zwei, drei oder vier Spalten zu erstellen. Tatsächlich gilt die Float-CSS-Eigenschaft für fast jedes HTML-Element. Wenn Sie die Grundlagen der Bearbeitung der Anordnung von Elementen mithilfe der Float-Funktion und dann der Eigenschaft kennen, wird die Erstellung eines Website-Designs nicht schwierig sein.
Spezielle Programme von Layoutern können Bilder manchmal nicht bemerken, sondern über ihnen erscheinen. Ganz ähnliche Dinge passieren im Webdesign, nur wenn man berücksichtigt, dass der Text, anstatt auf das Bild zu klettern, (bei falscher Verwendung der Float-Eigenschaft) daneben oder darunter angezeigt wird, aber immer nicht dort, wo der Entwickler ihn braucht.
Beschreibung der CSS-Float-Eigenschaft
Tatsächlich ist die Kenntnis der Verwendung der Float-Eigenschaft für jeden Webdesigner ein Trumpf im Ärmel. Aber leider kann ein Mangel an Verständnis darüber, wie diese Funktion funktioniert, zu Kollisionen von Site-Elementen und anderen ähnlichen Frustrationen führen. Zuvor kam es auch aufgrund von Fehlern in Browsern zu ähnlichen Situationen. Jetzt wird das Geheimnis der richtigen Verwendung der Float-Eigenschaft gelüftet, und es sollten keine Probleme mehr damit auftreten.
Die Float-Eigenschaft hat vier Werte:
- Float:erben;
- Schweben rechts;
- float:left;
- Float:keine;
Für diejenigen, die Englisch sprechen, sollten die Werte der Float-Eigenschaftsparameter klar sein. Aber für diejenigen, die es nicht wissen, hier eine kleine Erklärung. Parameter :links; Verschiebt den Körper des Elements in die äußerste linke Ecke des übergeordneten Elements. Das Gleiche passiert (nur in die andere Richtung) mit dem Parameter bcgjkmpjdfybb :Rechts;. Bedeutung :erben; weist das Element an, die gleichen Einstellungen wie sein übergeordnetes Element anzunehmen. Solche Elemente werden auch Child-Elemente genannt, da sie sich im HTML-Code direkt innerhalb des Parent-Elements befinden. Ein Besitz :keiner; Damit das Element den normalen Fluss des Dokuments nicht stört, ist es standardmäßig für alle Teile des Codes festgelegt.
Wie funktioniert Float?
Die Float-CSS-Eigenschaft funktioniert ganz einfach. Alles, was oben beschrieben wurde, kann ohne große Schwierigkeiten durchgeführt werden. Dann wird alles genauso einfach sein. Bevor wir uns jedoch weiter mit der Float-Eigenschaft befassen, lohnt es sich, ein wenig Theorie zu verstehen. Jedes Element einer Website ist ein Block. Sie können dies leicht überprüfen, indem Sie die Konsole öffnen Google Chrome durch Drücken von Strg + Umschalt + J. Text, Titel, Bild, Links und alle anderen Komponenten der Website werden in Blöcken angezeigt, die jedoch unterschiedlich groß sind. Zunächst kommen alle diese Blöcke nacheinander. Wie Sie im folgenden Beispiel sehen können, folgen die Codezeilen aufeinander, sodass sie streng nacheinander angezeigt werden.
Dies wird als normaler Fluss bezeichnet. Bei diesem Fluss liegen alle Blöcke vertikal übereinander (ohne die Körper der Elemente zu schneiden). Zunächst werden alle Inhalte einer Webseite auf diese Weise platziert. Wenn Sie jedoch beispielsweise die CSS-Spracheigenschaft Float Left verwenden, verlässt das Element seine natürliche Position auf der Seite und wird ganz nach links verschoben. Dieses Verhalten führt zwangsläufig zu einer Kollision mit den Elementen, die im normalen Fluss verbleiben.
Mit anderen Worten: Die Elemente sind nicht mehr vertikal angeordnet, sondern nebeneinander. Wenn das übergeordnete Element über genügend Platz verfügt, um zwei untergeordnete Elemente in sich aufzunehmen, kommt es nicht zu einer Kollision. Wenn nicht, ist die Überlappung eines Objekts mit einem anderen unvermeidlich. Dies ist äußerst wichtig, um zu verstehen, wie die CSS-Float-Eigenschaft funktioniert.
Klare Funktion zur Problemlösung
Die Float-Funktion hat einen lieben Freund – Clear. Zusammen ergänzen sie sich – beide Funktionen ergänzen sich und machen den Entwickler glücklich. Wie oben erwähnt, brechen benachbarte Elemente aus ihrem normalen Fluss aus und beginnen ebenfalls zu „schweben“, genau wie ein Element, auf das die Float-Eigenschaft angewendet wird (z. B. CSS Float Top). Dadurch erhalten Sie statt eines schwebenden Elements zwei und das überhaupt nicht an der Stelle, an der der Entwickler sie platzieren wollte. Von diesem Moment an beginnen alle Probleme.
Die Clear-Funktion hat fünf Werte:
- :links;
- :Rechts;
- :beide;
- :erben;
- keiner;
Analog können Sie erkennen, wann es am besten ist, die Clear-Funktion zu verwenden. Wenn wir eine Zeile im Code haben Schweben rechts;(gemeint ist CSS-Code), dann sollte die Funktion vorhanden sein Klar: richtig;. Dasselbe gilt auch für Immobilien float:left; wird es ergänzen Klar:links;. Beim Schreiben von Code Lösche beide; Es stellt sich heraus, dass sich das Element, auf das diese Funktion angewendet wird, unterhalb der Elemente befindet, auf die die Float-Funktion angewendet wird. „Inherit“ übernimmt die Einstellungen vom übergeordneten Element und „None“ nimmt keine Änderungen an der Site-Struktur vor. Wenn Sie verstehen, wie die Funktionen Float und Clear funktionieren, können Sie einzigartigen und ungewöhnlichen HTML- und CSS-Float-Code schreiben, der Ihre Website einzigartig macht.
Verwenden von Float zum Erstellen von Spalten
Die Float-Eigenschaft ist besonders nützlich, wenn Sie Spalten auf einer Website erstellen (oder CSS-Float-Inhalte auf einer Webseite zentrieren). Dieser Code ist der praktischste und bequemste, daher lohnt es sich, mehrere Optionen zum Erstellen einer vertrauten Site-Vorlage mit zwei Spalten in Betracht zu ziehen. Nehmen wir zum Beispiel eine Standard-Website mit Inhalt auf der linken Seite, einer Navigationsleiste auf der rechten Seite, einer Kopfzeile und einer Fußzeile. Der Code wird so aussehen:
Jetzt müssen wir herausfinden, was hier geschrieben steht. Das übergeordnete Element, das den Hauptteil des HTML-Codes enthält, wird als Container bezeichnet. Damit können Sie verhindern, dass Elemente, auf die die Float-Funktion angewendet wird, in verschiedene Richtungen streuen. Wäre es nicht vorhanden, würden diese Elemente bis an die Ränder des Browsers schweben.
Dann gibt es im Code #content und #navigation. Auf diese Elemente wird die Float-Funktion angewendet. #Inhalt geht nach links und #Navigation geht nach rechts. Dies ist erforderlich, um eine zweispaltige Site zu erstellen. Es ist notwendig, die Breite anzugeben, damit sich die Objekte nicht überlappen. Die Breite kann auch in Prozent angegeben werden. Das ist noch praktischer als in Pixeln. Beispiel: 45 % für #Inhalt und 45 % für #Navigation, und geben Sie die restlichen 10 % an die Margin-Eigenschaft weiter.
Die Clear-Eigenschaft, die sich in #footer befindet, verhindert, dass die Fußzeile #navigation und #content folgt, belässt sie jedoch an derselben Stelle, an der sie sich befand. Was kann passieren? wenn Sie die Clear-Eigenschaft nicht angeben? In diesem Code wird #footer einfach nach oben verschoben und landet unter #navigation. Dies geschieht, weil in der #navigation genügend Platz für ein weiteres Element vorhanden ist. Dieses visuelle Beispiel zeigt deutlich, wie sich die Eigenschaften Clear und Float gegenseitig ergänzen.
Beim Schreiben von Code können Probleme auftreten
Die obigen Beispiele sind recht einfach. Aber auch bei ihnen kann es zu Problemen kommen. Im Allgemeinen können bei der Float-Funktion tatsächlich viele unerwartete Probleme auftreten. So seltsam es auch sein mag, Probleme treten meist nicht beim CSS, sondern beim HTML-Code auf. Die Stelle, an der sich das Element mit der Float-Funktion im HTML-Code befindet, wirkt sich direkt auf dessen Funktionsweise aus. Um verschiedene Arten von Schwierigkeiten zu vermeiden, ist es am besten, sich an eine einfache Regel zu halten: Platzieren Sie Elemente mit der Float-Funktion zuerst im Code. Dies funktioniert fast immer und minimiert ihr unerwartetes Verhalten.
Kollision von Elementen
Eine Kollision tritt auf, wenn ein übergeordnetes Element, das mehrere untergeordnete Elemente enthält, nicht alle enthalten kann und diese sich überlappen. Es kommt sogar vor, dass Elemente nicht angezeigt werden, sondern von der Site verschwinden. Dabei handelt es sich nicht um einen Browserfehler, sondern um ein völlig erwartetes und ordnungsgemäßes Verhalten von Elementen mit der Float-Funktion.
Da sich diese Elemente zunächst im normalen Fluss befinden und dann durch die Float-Eigenschaft unterbrochen werden, entfernt der Browser sie möglicherweise von der Site-Seite. Verzweifeln Sie jedoch nicht, denn die Lösung ist einfach und klar: Verwenden Sie die Cear-Eigenschaft. Es ist möglich, dass die Verwendung von Clear von allen Auswegen aus diesem Problem die effektivste ist.
Das Problem der Kollision von Webseitenelementen kann jedoch auf andere Weise gelöst werden. Es gibt mindestens zwei weitere Möglichkeiten:
- Verwenden der Positionsfunktion;
- mit Flexbox.
Die Position-Funktion ist manchmal eine gute Alternative zu CSS Float. Bei der Verwendung von „Position“ ist es am besten, Bilder in der Mitte der Webseite zu platzieren. Wenn Sie die Werte:absolute und:relative richtig anwenden, passen die Elemente an ihren Platz und überlappen sich nicht.
Analyse des Positions- und Float-Funktionscodes
Es lohnt sich, einen genaueren Blick darauf zu werfen, wie man Float durch Position in HTML- und CSS-Code ersetzt. Es ist eigentlich ganz einfach. Nehmen wir an, es gibt einen #container und ein #div-Element.
In diesem Beispiel hilft die Verwendung der Funktion (CSS Div) Float im zweiten Container beim Erstellen einer Standard-Site mit zwei Spalten. Vergessen Sie niemals die Clear-Funktion. Ohne sie erhalten Sie nur übereinanderliegende Elemente.
Wie ändern Sie also Ihren CSS- und Float-Code, um Postion zu verwenden? Sehr einfach:
Position:relativ;
Position:relativ;
In diesem Fall nehmen #container und #div die vom Entwickler benötigte Position im übergeordneten Element ein. Hauptsächlich? Platzieren Sie #div und #container in einem übergeordneten Element, das ihrer Größe entspricht.
Flexbox – wie wird diese Funktion dazu beitragen, CSS Float zu ersetzen?
Flexbox ist derzeit die fortschrittlichste Methode zum Erstellen von Websites, daher wird diese Funktion von älteren Browserversionen nicht unterstützt. Diese Tatsache sollte nicht außer Acht gelassen werden, da Benutzer mit veraltete Versionen Browser können die korrekte Version der Website nicht sehen.
Flexbox ist keine Eigenschaft, sondern ein separates Modul. Daher unterstützt Flexbox eine Reihe von Eigenschaften, die nur damit funktionieren. Darüber hinaus verfügt die Anzeigefunktion, die in Flexbox über drei Parameter Inline, Block und Inline-Block verfügt, nur noch über einen Flex-Flow.
Wie funktioniert Flexbox?
Diese Technologie hilft dem Entwickler, Elemente einfach horizontal und vertikal auszurichten. Flexbox kann auch die Richtung und Reihenfolge ändern, in der Elemente angezeigt werden. Diese Technologie verfügt über zwei Achsen: Hauptachse und Querachse, um die herum die gesamte Flexbox aufgebaut ist. Außerdem wird die Wirkung der Float- und Clear-Funktionen entfernt. Es erstellt sein System im Code, in dem es einzigartige Eigenschaften verwendet, sodass es leider nicht möglich ist, andere Eigenschaften wie Float und Position in Elementen zu duplizieren. Und das wäre sehr nützlich, da Flexbox, wie oben erwähnt, nur in neuen Browserversionen funktioniert.
Denken Sie daran, dass Position, Flexbox und Float letztendlich dasselbe bewirken – ein ungewöhnliches und originelles Design für Ihre Website erstellen. Jede im Artikel besprochene Option tut dies auf ihre eigene Art und Weise und hat daher sowohl Vor- als auch Nachteile. Darüber hinaus kommt es vor, dass die Float-Funktion irgendwo perfekt ist (z. B. auf einer Site mit einfacher Struktur), aber irgendwo ist es besser, Position oder Flexbox zu verwenden.
Double-Margin-Bug
Leider hat jedoch manchmal jeder Entwickler Probleme, die nicht mit dem geschriebenen Code, sondern mit Fehlern in einem bestimmten Browsertyp zusammenhängen. Beispielsweise gibt es im Internet Explorer einen Fehler namens Double Margin Bug. Er vermehrt sich Randparameter um zwei, was zu einer Verschiebung von Site-Elementen über die Grenzen des Browsers hinaus führt. Um dies zu vermeiden, geben Sie einfach den Margin-Parameter als Prozentsatz an. Dieser Fehler tritt normalerweise auf, wenn die Werte der Eigenschaften „Margin“ und „Float“ übereinstimmen.
margin-left:10px;
Dieser Code verschiebt das Element im Internet Explorer um 20 Pixel nach links. Sie können den Code wie folgt ändern:
Rand links: 10 %;
oder so,
Rand rechts: 10 Pixel;
Beide Optionen lösen das Problem der Elementverschiebung.
Browserfehler und falsche Anzeige der Website
Es sei daran erinnert, dass der Internet Explorer nicht der einzige Browser ist, in dem Fehler auftreten können. Auch ältere Versionen von Google Chrome und Mozilla stellen einige Elemente moderner Websites falsch dar. Für jeden dieser Fehler kann eine Lösung gefunden werden. Generell möchte ich darauf hinweisen, dass durch die Verwendung von Float ein originelles und attraktives Website-Design entsteht. Wenn Sie die Grundlagen und Funktionsprinzipien dieser Eigenschaft verstehen, können Sie Fehler vermeiden und jedem Entwickler das Leben erleichtern.
