CSS样式-如何清除元素浮动?

PHP中文网
Lepaskan: 2017-06-22 15:22:29
asal
1515 orang telah melayarinya

清除浮动这个问题,做前端的应该再熟悉不过了,下面介绍4种方法给大家参考

1.使用clear:both清除浮动

示例1:使用p

 

html代码

css代码

 

 

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

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

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

示例2:使用

 

   

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

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

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

 

.box{margin:0 auto;border:10px solid #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.使用overflow属性

html代码

css代码

 

.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解决   

 

     

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;

 

     

 


Atas ialah kandungan terperinci CSS样式-如何清除元素浮动?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!