CSS清浮动方法总结

浮动----会使当前标签产生上浮效果，从而导致父标签高度塌陷的问题

1. 给父元素指定高度

　　<div style="height:200px">

　　　　<div style="float:right"></div>

　　</div>

　　简单粗暴！高度不定时，如果内部高度大于父级时，容易产生问题

2. 在浮动元素后边添加额外标签

　　<div>

　　　　　<div style="float:right"></div>
　　　　　<div style="clear:both"></div>

　　</div>

　　其他<p> <br/>标签也可以

　　会产生空标签，导致代码混乱，不易维护，且代码的直观感觉很不好

3. 给父标签添加 overflow:hidden;zoom:1 或者 overflow:hidden;width:98% 样式

　　<div style="overflow:hidden; zoom:1">

　　　　<div style="float:right"></div>

　　</div>

　　添加 zoom:1 是为了兼容IE6，zoom 和 width 二者必有一个，但是不能设置height值，浏览器能够自动获取浮动区域高度，

　　且不能与position一同使用，因为会引起超出尺寸的隐藏问题。

4. 给父标签设置 overflow:auto

　　<div style="overflow:auto; zoom:1">

　　　　<div style="float:right"></div>

　　</div>

　　与 3 基本相同，只引起的问题是若内部高度高出父级时会出现滚轴

5. 给父元素添加浮动，大家一起变成一个整体的浮动块

　　<div style="float:left; zoom:1">

　　　　<div style="float:right"></div>

　　</div>

　　会引起新的浮动问题

6. 给父标签添加 display:table

　　<div style="display:table; zoom:1">

　　　　<div style="float:right"></div>

　　</div>

　　 父级div属性变成表格，可能会引起其他位置问题

7. 给父标签添加绝对定位

　　<div style="position:absolute; zoom:1">

　　　　<div style="float:right"></div>

　　</div>

　　与 5 原理相通，都是将父元素脱离原始文本流，导致的问题也可能相似，可依旧使用该方法予以解决

8. 给父标签定义伪类 :after ，和zoom:1

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

　　.clearfix {zoom:1}

　　<div class="clearfix">

　　　　<div style="float:right"></div>

　　</div>

　　IE8以上和非IE浏览器才支持:after，zoom:1可解决浏览器兼容问题

 

转载于:https://www.cnblogs.com/s-qiu/p/7095478.html