当前位置：首页 → 问答吧 → BUG。。IE6清除浮动产生了一部分新的高度

BUG。。IE6清除浮动产生了一部分新的高度

时间：2010-11-01

来源：互联网

为什么IE6wrap的高度增加了了，和浮动有关？但是在左边和右边的后面已经清除了浮动，而且浮动的层的高度行高都设置为了0啊~~。。。求解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>练习中写出的BUG</title> <style> .wrap{width:960px; margin:0 auto; margin-top:15px; background:#000} .red{background:#F00; width:668px; float:left} .blue{background:#00F; width:290px; float:right; background:#E3ECF3} .yellow{background:#FF0; height:27px; text-align:center;} .cl{clear:both; line-height:0; height:0; overflow:hidden} </style> </head> <body> <div class="wrap"> <div class="red">这种写法是不行的</div> <div class="blue">IE6下PADDING引起黑色的部分多了一个PADDING-BOTTOM，那么深究其原因是怎么一回事了，未解待定padding-top:15px;改成margin-top:15px;可以解决，但是深究其LAYHOUT是怎么一回事了</div> <div class="cl"></div> <div class="yellow">11111111111</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 gongzixiaobai 于 2010-11-1 07:56 编辑 ]

作者: gongzixiaobai 发布时间: 2010-11-01

.blue{padding-bottom:100px;margin-bottom:-100px;}

作者: jackie198512 发布时间: 2010-11-01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>练习中写出的BUG</title> <style> .wrap{width:960px; margin:0 auto; margin-top:15px; background:#000;overflow:hidden;} .red{background:#F00; width:668px; float:left} .blue{background:#00F; width:290px; float:right; background:#E3ECF3;padding-bottom:100px;margin-bottom:-100px;} .yellow{background:#FF0; height:27px; text-align:center;} .cl{clear:both; line-height:0; height:0; overflow:hidden} </style> </head> <body> <div class="wrap"> <div class="red">这种写法是不行的</div> <div class="blue">IE6下PADDING引起黑色的部分多了一个PADDING-BOTTOM，那么深究其原因是怎么一回事了，未解待定padding-top:15px;改成margin-top:15px;可以解决，但是深究其LAYHOUT是怎么一回事了</div> <div class="cl"></div> <div class="yellow">11111111111</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: jackie198512 发布时间: 2010-11-01

BUG。。IE6清除浮动产生了一部分新的高度

热门阅读

热门下载