Detaillierte Einführung in CSS-Grundkenntnisse Float

Ich habe vor einiger Zeit einen Artikel über die Position grundlegender CSS-Kenntnisse geschrieben. Zu diesem Zeitpunkt war mein Verständnis von Float nicht sehr genau, worauf viele Leser auf MOOC.com hingewiesen haben (der ursprüngliche Artikel wurde korrigiert). und ich entschuldige mich, wenn es irreführend war). Jetzt werde ich mehr über Float erfahren und meine Lernerfahrung mit Ihnen teilen.

Grundkenntnisse des Floatings

Floating hat 4 Attribute: links (links schwebend), rechts (rechts schwebend), keine ( nicht schwebend), erben (geerbt).

Der enthaltende Block eines schwebenden Elements ist sein nächster Vorgänger auf Blockebene.

Das schwebende Element wird nach links (oder rechts) versetzt, bis seine Außenkante die Innenkante des enthaltenden Blocks oder die Außenkante eines anderen schwebenden Elements berührt.

Das schwebende Element befindet sich außerhalb des Standarddokumentflusses. Elemente auf Zeilenebene werden um das Element herum umbrochen, Elemente auf Blockebene sind jedoch nicht betroffen.

Beim Floating eines Nicht-Ersatzelements muss eine Breite für das Element deklariert werden, andernfalls tendiert die Breite des Elements gegen 0.

Der Rand (Margin) eines schwebenden Elements wird nicht mit dem Rand anderer Elemente zusammengeführt.

Eine eingehende Untersuchung von Floats

Die Oberkante eines schwebenden Elements darf nicht höher sein als das enthaltende Element. Die Oberseite des zuvor generierten Elements auf Blockebene oder Elements auf Zeilenebene im Block.

Schwebende Elemente dürfen einander nicht überlappen. Wenn nicht genügend Platz vorhanden ist, um das schwebende Element in horizontaler Richtung zu platzieren, wird es nach unten verschoben, bis genügend Platz vorhanden ist oder keine schwebenden Elemente mehr vorhanden sind.

Floating-Elemente können nicht über die linke, rechte und obere Grenze des enthaltenden Blocks hinauslaufen, sondern nur über die untere Grenze. (Wenn ein schwebendes Element die untere Grenze überschreitet, erhöhen einige Browser die Höhe des umschließenden Blocks, sodass das schwebende Element in den umschließenden Block aufgenommen werden kann, was zu einem großen Leerraum führt, der Probleme mit der Browserkompatibilität verursacht.)

Negative Einstellungen für schwebende Elemente Bei der Verwendung von Rändern verstößt das schwebende Element zwar scheinbar über den enthaltenden Block hinaus, verstößt jedoch nicht gegen die oben genannten Regeln.

Sonderfall: Wenn das schwebende Element breiter als der enthaltende Block ist, läuft das schwebende Element in die entgegengesetzte Richtung des Versatzes über.

Die negativen Auswirkungen des Schwebens

Der Hintergrund kann nicht angezeigt werden

Der Rand kann nicht geöffnet werden

Randauffüllung kann nicht korrekt angezeigt werden

So löschen Sie Float

/* 方法1，当父包含块缩成一条时无效 */

.clear-float2{ overflow:hidden; width:100%; }   
/* 方法2，overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容，从而实现了清除浮动。 */

.clear-float3{ overflow: auto; zoom: 1; }   
/* 方法3，zoom是在处理兼容性问题，hidden和auto都能清除浮动，据说auto对seo更友好 */

Die oben genannten CSS-Grundlagen Die detaillierte Erklärung des Wissens über Float ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in CSS-Grundkenntnisse Float. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!