margin 和 padding 只是一个间接原因，如果没有内外边距，可能外层 div 刚好可以容纳内部的 float。
加上边距后，每个 float 占用的空间就变大了，首先带来的问题是 div 的宽度不够，那么，愚蠢的 IE6 就会产生莫名其妙的问题，反映给用户的现象就是出现鬼影。
解决方案一：
准确计算内部 float 元素加在一起占用的宽高，确保外层 div 在 css 中明确指定了具体的 width 和 height 像素值，问题不会再出现。
其它解决方案
给浮动的div加上两个语句 1、浮动的div 设置display:inline 2、浮动的div 加overflow:hidden
实例
| 代码如下 | 复制代码 |
|
<style type="text/css"> *{margin:0;padding:0;} body{font-family: Arial, Helvetica, sans-serif,"宋体";font-size:12px;color:#565656;line-height:1.5;} .wrap{width:300px;border:1px solid orange;margin:55px auto;padding-bottom:50px;position:relative;} h3{background:yellow;height:25px;line-height:25px;} span{position:absolute;right:0;top:0;} </style> </head> <body> <div class="wrap"> <h3>标题</h3> <span>更多</span> </div> </body> |
|
解决IE6下float right 换行bug方案
html结构如下
| 代码如下 | 复制代码 |
|
<div> <span class="left">左边</span> <span class="center">中间</span> <span style="float: right" class="right">右边</span> </div> |
|
left和.center都没有 float 属性，然后在FireFox，google chrome及IE7、IE8等浏览器下都正常显示，可在Internet Explorer 6 下有bug：本来排一行的左边+中间+右边，可右边淘气的跳到了下一行。
解决办法
上面的html结构重排下序：
| 代码如下 | 复制代码 |
| <div><span style="float: right" class="right">右边</span> <span class="left">左边</span> <span class="center">中间</span> </div> | |
即可解决
时间： 2024-08-12 21:19:48