Heim > Artikel > Web-Frontend > Lösung für Div+CSS-Floating

Lösung für Div+CSS-Floating

高洛峰Original: 2017-03-31 11:15:301636Durchsuche

如何清楚浮动（一）

　　已知一个大的div容器，这个容器包含了两个子div容器，然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器)，清楚浮动的div容器设置css样式为clear:both，此时，大的div标签的内部(左右两边/*css5*/)浮动就清除了。

　　如果有一个大的div容器2664b5c137162ed32cb2c4b60e3a831f 16b28748ea4df4d9c2150843fecfba68 ，这个大的div包含了一个子div容器4cd6539b02a5cf52b7697d7aec70ae5416b28748ea4df4d9c2150843fecfba68, der Sub-Div-Container legt eine Breite, Höhe und Hintergrundfarbe fest und legt zu diesem Zeitpunkt keine inneren, Ränder und keinen Floating-Wert fest. Der Sub-Div-Container bleibt schwebend (float) erbt die Eigenschaften des Browsers und hat nicht die Funktion eines Layouts. Dann haben wir den Float des Sub-Div-Containers auf float:left gesetzt. Ich habe festgestellt, dass der Sub-Div-Container nach dem Festlegen von float:left schwebend war und der Sub-Div-Container einen bestimmten Abstand vom oberen Rand des großen Div hatte Container.

<body>
        <div class="divcss5">
            <div class="clear"></div>
　　　　　　　　<!--<div class="clear eft"></div>
            　　　　　　　　<div class="clear ight"></div>-->
        </div> 
    </body>

schwebt mit dem Attribut margin

Dann margin-top:10px, und der untergeordnete Div-Container bewegt sich basierend auf dem Original nach unten Der Abstand beträgt 10 Pixel, das heißt, das Floating hat keinen Einfluss auf den Versatz des Attributs „margin-top“ und hat auch keinen Einfluss auf margin-left, margin-right, margin-bottomDer Offset, den das Attribut haben sollte.

Float verfügt nicht über die Attribute „oben“, „links“, „rechts“, „unten“

Dann lösche ich jetzt „margin-top:10px;“, setze „top:10px“ für den Sub-Div-Container und finde das Die vertikale Koordinate tritt nicht auf, das heißt, Floating hat kein Top-Attribut. Ebenso gibt es keine linken, rechten und unteren Attribute.

Unter welchen Umständen können die Eigenschaften „oben“, „links“, „rechts“ und „unten“ so eingestellt werden, dass sie einen Einfluss auf das Schweben haben?

Floating hat die Attribute „oben“, „links“, „rechts“ und „unten“ (bedingte Einstellung der relativen Position Position)

Also habe ich relative Position hinzugefügt: relativ zum Sub-Div-Container, Dann setze top:10px und stellte plötzlich fest, dass der untergeordnete Div-Container um 10 Pixel nach unten versetzt war.

Fahren Sie im Zustand des untergeordneten Div-Floatings fort, setzen Sie es auf position: relative; und setzen Sie dann margin-left: 10px; darauf, und achten Sie auf die Position des untergeordneten Div Der div-Container bewegt sich horizontal nach rechts. Wenn der Versatz von 10 Pixel geändert wird, ändern sich margin-top, margin-right und margin-bottom alle auf die gleiche Weise.

Mit anderen Worten: Wenn Sie „float:left“ für einen Sub-Div-Container festlegen, funktioniert die Einstellung „margin-left“, aber die Einstellung „top“ hat keine Auswirkung. Top kann nur in einem schwebenden Zustand funktionieren, wenn die relative Position auf den untergeordneten Div-Container festgelegt ist. Bedeutet das also, dass left und top nur funktionieren können, wenn sie sich in relativen Positionen befinden? Also machen wir jetzt ein Experiment. Im untergeordneten Div-Container wird es keine schwebende oder relative Position geben, und dann wird der entsprechende CSS-Code wie folgt geschrieben: folgt. klar{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left: 10px;}; Das Ergebnis ist, dass sich der Sub-Div-Container überhaupt nicht auf der horizontalen und vertikalen Achse bewegt hat, sodass sich herausstellt, dass links und oben nur funktionieren, wenn die relative Position festgelegt ist. Die Marge funktioniert unabhängig davon, ob Sie die Position festlegen oder nicht.

Fahren Sie mit dem Float-Floating oben fort. Wenn Sie nun inherit das Floating-Attribut des Browsers festlegen, sehen wir zu diesem Zeitpunkt, dass das untergeordnete Div nicht floatet und sich auf der linken Seite befindet Standard. Ebenso hat das Festlegen des Floating-Stils „none“ anfänglich für das untergeordnete Div keinen Floating-Effekt. Nur wenn die linken und rechten Gleitkommazahlen für den Sub-Div-Container festgelegt sind, erscheint der Sub-Div-Container schwebend.

So löschen Sie Floats (2)

Als nächstes verwenden wir eine andere Methode zum Löschen von Floats. Der HTML-Code ist immer noch der obige Code, der CSS-Code des Div des großen Containers: . divcss5{padding:10px 0;width: 100%; left: 50%;right: 50%;background: #007CB5;}, CSS-Code des untergeordneten div-Containers: .clear{width: 200px; Hintergrund: #f2e ;color:#030617;height: 20px;float:left;}, was Sie zu diesem Zeitpunkt sehen, ist der schwebende Effekt, der Sub-Div-Container schwebt über dem großen Container. Für das gleiche Prinzip habe ich Verwenden Sie weiterhin clear:both; Wir können das CSS-Pseudo-Element :after verwenden. Das Folgende ist ein sehr einfacher CSS-Code. divcss5:after{content: "1";clear : Both;display: block;} Zu diesem Zeitpunkt sehen wir, dass der Float des großen Containers gelöscht ist, und wir können dies im Browser tun Achten Sie darauf, dass der Sub-Div-Container im großen Div-Container enthalten ist. Wenn Sie das Element im Browser anzeigen, können Sie sehen, dass „after“ im übergeordneten Container enthalten ist. Daher entspricht „after“ dem Hinzufügen eines klaren schwebenden Div im übergeordneten Container, mit der Ausnahme, dass eine Div-Ebene fehlt. Diese Ebene wird durch .divcss5 implementiert :nach .

Das obige ist der detaillierte Inhalt vonLösung für Div+CSS-Floating. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Einführung in die CSS-ÜberlaufeigenschaftNächster Artikel：Detaillierte Einführung in die CSS-Überlaufeigenschaft

In Verbindung stehende Artikel

Mehr sehen