Heim >Web-Frontend >CSS-Tutorial >CSS-Stile – Wie lösche ich Element-Floats?

CSS-Stile – Wie lösche ich Element-Floats?

PHP中文网Original: 2017-06-22 15:22:291547Durchsuche

Beseitigen Sie das Problem des Floatings. Wer am Frontend arbeitet, sollte damit vertraut sein. Hier sind 4 Methoden als Referenz 1.Floats löschen mit

clear:both

🎜>Beispiel1: Verwenden Sie p

Beispiel

HTML-CodeCSS

Code

.box{ width:300px;margin:0 auto;border:10px durchgezogen #000;}

.p{ width:200px;height:200px;background:red;float:left;}

. clear{ height:0px;font-size:0;clear:both;overflow : versteckt;}

2 :

Verwenden

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.p{ width:200px;height:200px;background:red;float:left;}

示例3 ：伪类对象::after+zoom:1(推荐使用)

< ;/p>

.box{margin:0 auto;border:10px durchgezogen #000;}

.p{ width:200px;height:200px;background:red;float:left;}

. clear{zoom:1;}

.clear:after{display:block;clear:both;content:"";visibility:hidden;height:0}

2.使用Überlauf属性

html代码

css代码

.box{ width:300px;border:1px solid #000;overflow:auto;}

.p1{ width:260px;height:400px;background:Red;float:left;}
注意：overflow:auto;、overflow:hidden;都可以

.box{ width:300px;border:1px solid #000;overflow:auto;}

.p1{ width:260px;height:400px;background:Red;float:left;}
注意：overflow:auto;、overflow:hidden;都可以

3.使用display属性

html代码

css代码

.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

.p{ width:200px;height:200px;background:red;float:left;}

注意：父元素不能水平居中，在父元素使用text-align:center解决

.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}

.p{ width:200px;height:200px;background:red;float:left;}

text-align:center解决

4.父级元素浮动

html代码

css代码

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}

.p{ width:200px;height:200px;background:red;float:left;}

注意：父元素不能水平居中，可以使用定位解决

position: relative;

left: 50%;

margin-left: -150px;

.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}.p{ width:200px;height:200px;background:red;float:left;} Position: relativ;links: 50%;Rand links: -150px;

Das obige ist der detaillierte Inhalt vonCSS-Stile – Wie lösche ich Element-Floats?. 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：Wie kachele ich ein CSS-Hintergrundbild?Nächster Artikel：Wie kachele ich ein CSS-Hintergrundbild?

In Verbindung stehende Artikel

Mehr sehen