Heim > Artikel > Web-Frontend > Wie verwende ich das Float-Attribut von CSS? Ausführliche Erklärung der CSS-Floating-Eigenschaft float

Wie verwende ich das Float-Attribut von CSS? Ausführliche Erklärung der CSS-Floating-Eigenschaft float

不言Original: 2018-10-30 13:32:035262Durchsuche

Das Float-Attribut in CSS wird häufig in der Webentwicklung verwendet, aber wie verwendet man das Float-Attribut in CSS? Viele Freunde sind möglicherweise verwirrt. In diesem Artikel wird die Verwendung des Float-Attributs in CSS ausführlich erläutert.

Werfen wir zunächst einen kurzen Blick auf das Float-Attribut in CSS

Das Float-Attribut ist, wie der Name schon sagt, ein Floating-Attribut. Elemente, zu denen das Float-Attribut gesetzt ist links oder rechts entsprechend dem Attributwert. Wir nennen es Einstellungselemente mit dem Float-Attribut sind schwebende Elemente.

Mit den oben genannten Worten fühlt es sich relativ abstrakt an. Lassen Sie uns mehr über das Float-Attribut aus der Verwendung des Float-Attributs in CSS erfahren.

Sehen wir uns zunächst ein Anwendungsbeispiel des Float-Attributs an

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
img 
{
    float:right;/*向右*/
    /*float: left;向左*/
}
</style>
</head>
<body>
<p>
    <img  src="image/timg.jpg"    style="max-width:90%"  style="max-width:90%" / alt="Wie verwende ich das Float-Attribut von CSS? Ausführliche Erklärung der CSS-Floating-Eigenschaft float" >
好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
</p>
</body>
</html>

Im obigen Code haben wir dem Bild ein float:right-Attribut gegeben, das dazu führte, dass das Bild zum schwebend wurde Der Effekt ist wie folgt:

Wie verwende ich das Float-Attribut von CSS? Ausführliche Erklärung der CSS-Floating-Eigenschaft float

Dies ist die Funktion, die durch das Float-Attribut implementiert wird, aber das Float-Attribut wirkt sich nicht nur selbst während der eigentlichen Ausführung aus Beim Anwendungsprozess wirkt es sich auch auf die Umgebung aus. Die Elemente umgeben es, daher müssen Sie zu diesem Zeitpunkt
die Auswirkungen des Schwebens beseitigen.

Informationen zum Löschen von Floating-CSS finden Sie in diesen beiden Artikeln, um dieses Problem zu lösen. Der Inhalt ist sehr detailliert, daher werde ich hier nicht näher darauf eingehen.

Welche Methoden gibt es, um Floats in CSS zu löschen? Einführung in vier Methoden zum Löschen von CSS-Floats

Was bedeutet CSS-Float? Das Prinzip des CSS-Floatings und die Methode des CSS-Clearing-Floatings (mit Code)

Das obige ist der detaillierte Inhalt vonWie verwende ich das Float-Attribut von CSS? Ausführliche Erklärung der CSS-Floating-Eigenschaft float. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css Float

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：Verwenden Sie den linearen CSS3-Verlauf, um den Blinkeffekt von Bildern zu erzielen (Codebeispiel).Nächster Artikel：Verwenden Sie den linearen CSS3-Verlauf, um den Blinkeffekt von Bildern zu erzielen (Codebeispiel).

In Verbindung stehende Artikel

Mehr sehen