Technische Artikel im Zusammenhang mit Float im CSS_Experience-Austausch

Das Float-Konzept ist vielleicht das verwirrendste Konzept in CSS. Float wird oft missverstanden und wegen Problemen bei der Lesbarkeit und Benutzerfreundlichkeit kritisiert, die durch das Floaten aller kontextuellen Elemente verursacht werden. Die Hauptursache dieser Probleme liegt jedoch nicht in der Theorie selbst, sondern in der Interpretation der Theorie durch Entwickler und Browser.

Wenn Sie das Floating-Konzept sorgfältig lesen, werden Sie feststellen, dass es nicht so kompliziert ist, wie es scheint. Die meisten Probleme werden durch ältere Versionen des IE verursacht (ich vermute nur). Wenn Sie diese Fehler kennen, können Sie diese Probleme vermeiden.

Versuchen wir, diese Probleme anzugehen und einige frühere Missverständnisse über die Verwendung von Floats auszuräumen. Wir haben Dutzende relevanter Artikel konsultiert und die wichtigsten ausgewählt, die Sie wissen müssen.

Was Sie über Floats wissen sollten
------------------------------------------------ - ------------------------------------------------- - ----------------------

　 „Die Praxis, Bilder und Text zu umgeben, lässt sich bis in eine lange Zeit zurückverfolgen. Aus diesem Grund Netscape1. 1. Diese Funktion wurde erstmals in Browsern eingeführt und warum CSS das Float-Attribut verwendet, um sie zu implementieren. Der Begriff „Float“ stammt aus dem mit Netscape 1.1 veröffentlichten Dokument „Additions to HTML 2.0“ und beschreibt ein Element, das zu schweben scheint „Die Positionierung des schwebenden Elements basiert immer noch auf dem normalen Dokumentfluss. Anschließend wird es aus dem Dokumentfluss extrahiert und so weit wie möglich nach links oder rechts verschoben. Um das schwebende Element herum. Wenn ein Element extrahiert wird Im Vergleich zum normalen Dokumentfluss ignorieren andere Elemente, die sich noch im Dokumentfluss befinden, den ursprünglichen Platz. Das Element wird automatisch gedreht, nachdem es verschoben wurde Element kann nach links oder rechts von der aktuellen Zeile verschoben werden. Die Attribute lauten wie folgt: float: left, float: right oder float: none“

„Sie sollten dies für alle schwebenden Elemente festlegen Attribut (es sei denn, es handelt sich um ein -Element, das eine implizite Breite hat). Das Ergebnis ist unvorhersehbar. Beispielsweise sollten schwebende Elemente eine definierte Breite haben. Eigenschaften, ob explizit angegeben oder implizit, füllen Containerelemente so horizontal wie möglich aus, als wären sie nicht schwebender Inhalt, sodass kein Platz für andere Inhalte bleibt, und im normalen Dokumentfluss die vertikalen Ränder von schwebenden Elementen überlappen sich nicht. Schließlich können sich schwebende Elemente im normalen Dokumentfluss mit benachbarten Elementen auf Blockebene überlappen , aber das Konzept des Schwebens.) „

„Das erste, was wir bedenken müssen, ist, dass schwebende Elemente nur nach links oder rechts schweben können, es gibt kein Schweben in die Mitte Anfänger machen Fehler. Die grundlegendste Regel ist, dass schwebende Elemente nur nach beiden Seiten schweben können Wenn wir ein anderes Element in die gleiche Richtung schweben lassen, wird es schweben, bis es den Rand des zuvor schwebenden Elements berührt. Wenn wir weitere Elemente schweben lassen, werden sie nacheinander angeordnet, aber bald ist kein Platz mehr vorhanden . Die Zeile kann keine weiteren schwebenden Elemente aufnehmen und das nächste schwebende Element wird in eine andere Zeile umgebrochen und weiterhin angeordnet. "

Enthält Blöcke oder enthält Boxen: „Containerelemente beziehen sich auf Elemente auf Zeilen- oder Blockebene, die andere untergeordnete Elemente enthalten. . . . ” 　　

　　　„Bei expliziter Angabe wird die vertikale Position eines schwebenden Elements durch seine ursprüngliche Position im Dokumentfluss bestimmt, wobei der obere Rand am oberen Rand der aktuellen Zeile ausgerichtet ist. Horizontal bewegt es sich jedoch so weit wie möglich in Richtung des Randes des Behälterelements, folgt aber dennoch der Polsterung des Behälterelements. Inline-Elemente derselben Zeile werden um das schwebende Element herum angeordnet. "

"Da schwebende Elemente keinen normalen Dokumentflussraum belegen, nehmen Elemente auf Blockebene, deren Positionen vor und nach dem schwebenden Element nicht explizit angegeben sind, die Position ein, an der sich das schwebende Element befinden sollte, als ob dies der Fall wäre hat nie existiert. Die Breite der Linie nach dem schwebenden Element wird basierend auf dem schwebenden Element kleiner. Die Elemente vor dem schwebenden Element werden neu angeordnet und belegen eine separate Zeile. (Anmerkung: ie und ff verhalten sich in diesem Fall anders)“

„Wenn in der horizontalen Richtung der aktuellen Zeile nicht genügend Platz vorhanden ist, um das schwebende Element aufzunehmen, gehen Sie zur nächsten Zeile, bis dort Platz ist kann das schwebende Element aufnehmen. "

„Kein schwebendes Element darf die obere Grenze des ursprünglichen Dokumentspeicherorts überschreiten. Die Oberseite eines schwebenden Elements muss an der Oberseite der aktuellen Zeile ausgerichtet sein (oder an der Unterkante des vorherigen Elements auf Blockebene, wenn kein aktuelles Zeilenelement vorhanden ist). ”

　„Um die Float-Theorie wirklich zu verstehen, müssen Sie verstehen, was eine Zeilenbox in CSS ist. Um zu erklären, was eine Zeile ist, müssen Sie leider zunächst verstehen, was ein Element auf Zeilenebene ist.Elemente auf Zeilenebene beziehen sich auf Elemente, die nicht auf Blockebene liegen, z. B. ist „Row“ ein virtuelles Rechteck, das alle Elemente auf Zeilenebene enthält, aus denen die Zeile besteht zu diesen Elementen auf Zeilenebene. ”

　„Wenn wir allen Spalten im Div „float: left“ hinzufügen, werden sie eine nach der anderen links angeordnet. Wenn wir unten auf der Seite eine Fußzeile haben möchten, tun wir das nicht. Es ist keine längste Spalte erforderlich, solange Sie einfach „clear: Both“ hinzufügen Browser. Ob die Implementierung konsistent bleibt. Insbesondere wenn das schwebende Element Teil eines komplexeren Layouts ist, wird es noch anfälliger. ”

Floats löschen
------------------------------------- --- ------------------ --- -------

　"Die Elemente nach dem schwebenden Element umgeben automatisch das schwebende Element. Wenn Sie dies nicht möchten, können Sie diesen Elementen das Attribut „clear“ zuweisen. Dieses Attribut hat 4 Einstellungen: klar: links, klar: rechts, klar: beide oder klar: keine“

Es gibt viele Techniken, um schwebende Elemente zu bereinigen, ohne zusätzliche unsemantische Tags einzuführen. Nachfolgend sind 3 gebräuchlichere Methoden aufgeführt: a ) Containerelemente zusammen schweben lassen b) Überlauf verwenden: versteckt für Containerelemente c) CSS-Pseudoklassen verwenden wie: nach

„Das Einfügen eines Bereinigungselements dient zum Erstellen des Containers. Standardpraxis zum korrekten Umschließen aller schwebenden Elemente, Dadurch wird der untere Rand des Containers „gezogen“, um das enthaltene Element einzuschließen. ”

　„Bei Layouts, die auf dem Float-Design basieren, besteht ein häufiges Problem darin, dass der Container des Float-Elements nicht automatisch erweitert wird, um das Float-Element aufzunehmen. Wenn Sie einen Rahmen um alle schwebenden Elemente hinzufügen möchten (z. B. einen Rahmen um ein Containerelement), müssen Sie dem Browser explizit befehlen, den Container zu strecken. Sie können die Überlaufmethode verwenden. ”

Verwenden von:after Stellen Sie sich vor, wir verwenden :after, um einen Punkt einzufügen und seine Eigenschaft {clear: Both;} festzulegen. Das ist alles, was Sie tun müssen, aber niemand wird den Boden des Containers akzeptieren. Es gibt einen leichte Lücke, daher müssen wir auch {height: 0;} und {visibility: versteckt;} festlegen, um eine perfekte Passform zu gewährleisten.