Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

无忌哥哥
Freigeben: 2018-06-29 09:21:55
Original
2258 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage