css中使用浮动的情况和清除浮动的方法

时间:2024-08-04 14:35:26

1.使用浮动时出现的情况:

(1)使块元素在一行显示

(2)使内嵌元素支持宽高

(3)不设置宽高的时候宽度由内容撑开

(4)换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动)

(5)元素添加浮动,会脱离文档流,按照指定的一个方向移动,直到碰到父级的边框或者另外一个浮动元素停止(文档流是文档中可现实对象在排列时所占用的位置)

2.清除浮动的方法:

(1)给父级元素也加浮动(这种情况当父级元素margin:0 auto;也不能居中)

(2)给父级元素加display:inline-block;(同上一种方法不居中,只有IE6,7居中)

(3)在浮动元素下加<div class=”clear”></div>  .clear{height:0px;font-size:0;clear:both;},但是在IE6下,块元素有最小高度,即当height<19px时,默认为19px,解决方法:font-size:0;或overflow:hidden;

(4)在浮动元素下加<br clear=”all”>

(5)给父级元素加{zoom:1}

.clear{zoom:1}

.clear:after{content:””;display:block;clear:both;}

(6)给浮动元素父级加overflow:auto;

eg:css的zoom属性:zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发IE的hasLayout属性,清除浮动,清除margin的重叠等。

相关文章