Eine kurze Analyse der Verwendung von HTML-Float

Einige Verwendungen von Float

Linke Aufhängung: float:left;
Rechte Aufhängung: float:right;

Float-Nutzung

Float hat ein breites Anwendungsspektrum. Hier ist eine kurze Einführung in die häufigsten Verwendungszwecke:

• Bevor ich auf Float stieß, habe ich einige Inline-Block- und Blockattribute mit Div-Inlay festgelegt, um das Layout der Seite zu vervollständigen. Dann bin ich auf das Float-Attribut gestoßen, mit dem es viel einfacher war, die Elemente direkt zu floaten. Beim Float gibt es keinen Unterschied zwischen Blockebenenelementen, Inline-Elementen oder Inline-Blockelementen. Float passt das Layout auch automatisch an, wenn sich die Breite des übergeordneten Elements ändert. Wenn Sie beispielsweise das sichtbare Fenster direkt anpassen, wird das Element in die nächste Zeile gequetscht.
• Was die SEO-Optimierung betrifft, die wir gerade gelernt haben, ist es außerdem so, dass der Browser von oben nach unten analysiert. Die wichtigsten Inhalte werden meistens vorne und einige unwichtige Inhalte oder Anzeigen hinten angezeigt. Wir möchten jedoch auch, dass die Benutzer die Anzeigen bemerken. Daher werden die Hauptinhalte meistens in der Mitte angeordnet und die Anzeigen links und rechts eingeblendet. Ich glaube, dass Freunde, die häufig im Internet surfen, dies auch bemerkt haben. Lassen Sie uns als Nächstes über einige der Schriften und Auswirkungen der Aussetzung sprechen.

Wenn ein Kindelement angehalten wird, wird die Höhe des Elternelements reduziert. Dies erfordert das Aufheben der Anhaltung, was im nächsten Kapitel erläutert wird.
Kommen wir also zurück zum Punkt.

Das erste Phänomen ist float=inline-block

Wenn die Funktion angehalten wird, werden die vier Blöcke im Inline-Blockmodus angezeigt: wie unten dargestellt

<Stil>
        div{
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: rosa;
            Rand: 1px, durchgehend schwarz;
            schweben: links;
        }
    </Stil>

<Text>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body> 

Das zweite Phänomen:

Wie in der folgenden Abbildung gezeigt, wird das zweite Blockelement unter dem ersten angezeigt, da das erste Blockelement schwebt.
Wenn das nächste Element jedoch angehalten wird, wird es nicht über das vorherige Element verschoben. Beispielsweise wird das vierte Blockelement angehalten, das dritte jedoch nicht. Das vierte Blockelement bleibt an seiner ursprünglichen Position.

 <Stil>
        .erster-eins{
            schweben: links;
            Hintergrundfarbe: grün;
        }
        .zweite-eins{
            Hintergrundfarbe: lila;
        } 
        .dritter-eins{
           
            Hintergrundfarbe: blau;
        } 
        .vierter-eins{
            schweben: links;
            Hintergrundfarbe: grau;
        } 
        div{
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: rosa;
            Rand: 1px, durchgehend schwarz;
            Schriftgröße: 30px;
        }
    </Stil>

<Text>
    <div Klasse="Erster-Eins"></div>
    <div Klasse="zweite-eine"></div>
    <div Klasse="dritte-eine"></div>
    <div Klasse="vierte-eins"></div>
</body> 

Das dritte Phänomen:

Wenn alle Elemente schweben und die verbleibende Breite des übergeordneten Elements nicht ausreicht, um die untergeordneten Elemente in der Zeile zu unterstützen, werden sie an der oberen Ebene ausgerichtet.

Dieser Artikel wurde übertragen von: https://segmentfault.com/a/1190000022669455

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von HTML-Float. Weitere relevante HTML-Float-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!