CSS-Stile – Wie lösche ich Element-Floats?-CSS-Tutorial-php.cn

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

PHP中文网

Freigeben： 2017-06-22 15:22:29

Original

1546 Leute haben es durchsucht

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!