Umgang mit Zeilenumbrüchen, die durch Float-Attribute in HTML5 verursacht werden

In der h5-Entwicklung werden Float-Attribute häufig verwendet, um einige Layoutprobleme zu lösen. In einigen komplexen Layouts kann es jedoch auch zu Phänomenen wie der Verwendung des Float-Attributs kommen, die dazu führen, dass die Elemente in einer Zeile nicht ausgerichtet werden können oder die Float-Elemente umbrochen werden. Wenn wir auf ein solches Problem stoßen, können wir die Position des Elements ändern, um das Problem des Zeilenumbruchs oder der Fehlausrichtung von Elementen zu lösen.

<p class="container">
    <a href="address-manager.html">
        <i class="icon-home icon-large"></i>
        <p>修改收货地址</p>
        <i class="icon-angle-right icon-2x"></i>
    </a>
</p>

Als ich beispielsweise ein menüähnliches Layout schrieb, trat dieses Phänomen in der Spalte „Adresse ändern“ auf, als ich das Element verschob, zu dem ich schweben wollte rechts (Pfeil nach rechts) Durch Anpassen der Position des ersten Elements im Code wird das Problem des Zeilenumbruchs in Gleitkommazahlen gelöst.
Da verschiedene Browser einige Unterschiede in den Stilen aufweisen, gibt es eine andere Situation, in der Probleme beim Zeilenumbruch auftreten, wenn die Breite der nach rechts schwebenden Elemente nicht ausreicht. In diesem Fall ändern Sie einfach die Breite, um das Problem zu lösen.
Das Folgende ist eine Zusammenfassung der Merkmale, die sich auf das Float-Attribut beziehen, das während des Informationssuchprozesses gelernt wurde:
(1) Float ist ein Floating-Positionierungsattribut in CSS
Eigenschaften:
1. Die schwebende Box kann nach links und rechts schweben, bis ihre Außenkante auf die umschließende Box oder eine andere schwebende Box trifft
2. Die schwebende Box befindet sich außerhalb des normalen Dokumentflusses und der normale Fluss des Dokuments ignoriert die Existenz der schwebenden Box
3. Schwebende Boxen wirken sich nicht auf das Layout von Boxen auf Blockebene aus, wirken sich jedoch auf die Anordnung von Inline-Boxen aus 4. Wenn die Höhe des schwebenden Felds die Höhe des umschließenden Felds (dh des übergeordneten Layouts) überschreitet, wird die Höhe des umschließenden Felds nicht automatisch erweitert enthaltende Box wird 0 sein, was das sogenannte Höhenkollaps-Phänomen ist.
Die obige Situation ist tatsächlich eine Manifestation der Floating-Box, die sich auf die Inline-Box auswirkt.

Das obige ist der detaillierte Inhalt vonUmgang mit Zeilenumbrüchen, die durch Float-Attribute in HTML5 verursacht werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!