Rumah > hujung hadapan web > tutorial css > 清除浮动float的方法总结

清除浮动float的方法总结

高洛峰
Lepaskan: 2017-03-16 10:34:52
asal
1711 orang telah melayarinya

抛弃那些没用的方法,只记住最实用的一种方法即可!

给要清除浮动的父元素多加一个class属性clearfix!!!

样式如下:

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

}

为了兼容ie6,ie7(现在的项目几乎已经完全不考虑)

.clearfix{

zoom:1

}

清除浮动就是这么简单,可以作为公共样式common.css,每个页面都可以直接调用!

简单的实例应用:

  

float:left">

    //sth

  

  

:right">

    //sth

  

为什么要清除浮动:

1.之前写的时候都会发现页面写着写着就发生错乱,而且还有重叠?就是浮动惹的祸!

2.父级元素下面的子元素float时,可能会导致父级height值为0;故在使用了float之后,立即在父级上面加上clearfix,彻底消除float带来的各种怪异问题!

 


Atas ialah kandungan terperinci 清除浮动float的方法总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
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