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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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的重叠等。