Wie verwende ich Float am Frontend? Detaillierte Erläuterung des Float-Attributs

Beim Webseitenlayout stoßen wir häufig auf den Effekt der Kombination von Text und Bildern, und einige Bilder und Texte werden tatsächlich häufig auf Websites verwendet und sind auch relativ weit verbreitet Bildmischung? Lassen Sie uns das Float-Attribut erklären? Und wie benutzt man Float?

1: Float-Attribut

Im Frontend verwenden viele Leute das Float-Attribut, um Grafiken und Text zu mischen, aber Neulinge wissen nicht, was das Float ist Das Attribut wird für verwendet. Tatsächlich hat das Float-Attribut zwei Attribute, eines ist links und das andere ist rechts, links bedeutet, dass das Element nach links schwebt, und rechts bedeutet, dass das Element nach rechts schwebt. Unter normalen Umständen schweben Elemente nicht von selbst. [Empfohlenes Lernen: HTML5 Online-Handbuch
]

Zum Beispiel:

 <title>CSS浮动float属性</title>
    <style type="text/css">
       img{float:left;}
       p{font-size:16px;text-indent:28px;}
    </style>

Der Anzeigeeffekt ist wie folgt:

Aber aufmerksame Leser werden herausfinden, warum der obere Rand des Textes und das Bild nicht horizontal zentriert sind. Im Browser hat das p-Tag genau wie bei uns den Standardeffekt stark, wir sehen fett. Wenn Sie möchten, dass Bild und Text konsistent sind, müssen Sie den Stil im Browser entfernen.

2: So verwenden Sie das Float-Attribut, um den Abstand festzulegen zwischen Bild und Text

Wenn der Text das Bild umgibt und ein gewisser Abstand zum Text besteht, müssen wir nur Attribute zu den Bildattributen hinzufügen. Der Code lautet wie folgt:

<style type="text/css">
       img{margin-right:20px;margin-bottom:20px;float:left;}
    </style>

In CSS ist das Float-Attribut sehr wichtig. Wir verwenden den Float-Effekt häufig zum Layouten von Divs, nicht nur zum Planen des gesamten Effekts, sondern auch zum Anordnen einiger grundlegender Elemente Wie wird Float am vorderen Ende verwendet? Eine vollständige Einführung in die detaillierte Erklärung von Float-Attributen. Wenn Sie mehr über das

Html5-Tutorial

erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie verwende ich Float am Frontend? Detaillierte Erläuterung des Float-Attributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!