Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

PHP中文网
Freigeben: 2017-06-22 15:22:29
Original
1528 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代码

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代码

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代码

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!

Verwandte Etiketten:
css
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