Heim > Artikel > Web-Frontend > Tipps zum Löschen von Floats zwischen CSS-Elementen derselben Ebene

Tipps zum Löschen von Floats zwischen CSS-Elementen derselben Ebene

无忌哥哥Original: 2018-06-29 09:21:552241Durchsuche

Linkes Float löschen: Auf der linken Seite dieses Elements dürfen keine schwebenden Elemente angezeigt werden, und es handelt sich um ein Blockelement. Es kann nur an den Anfang fallen der nächsten Zeile und beginnen Sie mit der Anzeige.

clear: left;

Clear right float: Wie oben dürfen schwebende Elemente nicht auf der rechten Seite des Elements angezeigt werden kann nur in einer weiteren Zeile unterhalb des rechten schwebenden Elements angezeigt werden. Der untere Rand ist der Ausgangspunkt und beginnt mit der Anzeige

klar: rechts;

Wenn schwebende Elemente sowohl auf der linken als auch auf der rechten Seite des Elements verboten sind, können Sie die folgende Abkürzung verwenden

clear:both;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6.同级元素之间的清除浮动的技巧</title>
<style type="text/css">
        .box1 {
            width:200px;
            height: 200px;
            background-color: lightskyblue;
            /*设置左浮动*/
            float:left;
        }
        .box2 {
            width:250px;
            height: 250px;
            background-color: lightgreen;
/*设置右浮动*/
            float:right;
        }
        .box3 {
            width:300px;
            height: 300px;
            background-color: lightcoral; /*珊瑚色*/
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

Das obige ist der detaillierte Inhalt vonTipps zum Löschen von Floats zwischen CSS-Elementen derselben Ebene. 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：Das Prinzip des CSS-FloatingsNächster Artikel：Das Prinzip des CSS-Floatings

In Verbindung stehende Artikel

Mehr sehen