61,111
社区成员
发帖
与我相关
我的任务
分享css中float的疑问
这是《div+css网站布局实录》中的一个例子，代码如下：
书中所说的效果应该是left和main在左上角重叠，right在下面。但在IE里面是left和main并列，right在下面。用火狐和Dreamweaver视图的效果都是left在左上角，main和right重叠。
我感觉书中的理论和所说的效果比较一致：float了的left应该脱离流，这时main和right会顶上去；而left又浮到box的左边界。
请帮我解释一下在IE和火狐里看到的样子，到底是什么原因？？
<!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>CSS浮动</title>
<style type="text/css">
<!--
#box{
border:1px solid;
width:720px;
}
#left{
width:150px;
height:150px;
background-color:blue;
border:1px dotted;
float:left;
}
#main{
width:150px;
height:150px;
background-color:blue;
border:1px dotted;
}
#right{
width:150px;
height:150px;
background-color:blue;
border:1px dotted;
}
-->
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="main">main</div>
<div id="right">right</div>
</body>
</html>
书中所说的效果应该是left和main在左上角重叠，right在下面。但在IE里面是left和main并列，right在下面。用火狐和Dreamweaver视图的效果都是left在左上角，main和right重叠。
我感觉书中的理论和所说的效果比较一致：float了的left应该脱离流，这时main和right会顶上去；而left又浮到box的左边界。
请帮我解释一下在IE和火狐里看到的样子，到底是什么原因？？
...全文
请发表友善的回复…
发表回复
HeLiang7 2009-11-01
- 打赏
- 举报
对不起，我分应该是给的1楼的，怎么跑2楼了？有没有办法改啊？
kkshiba兄，对不住啊，昨天我结帖的时候，2楼都不记得有看到，不知道是我的错误还是csdn的问题，报歉啊！！！
kkshiba兄，对不住啊，昨天我结帖的时候，2楼都不记得有看到，不知道是我的错误还是csdn的问题，报歉啊！！！
lilimaty 2009-10-31
- 打赏
- 举报
我改动一下代码，可以看得更清楚
在firefox中，不是main和right重叠了，其实是left和main重叠，然后left又把main中间的文字挤下去，看起来就好像main和right重叠一样。
呵呵~
<!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>CSS浮动</title>
<style type="text/css">
#box { border:1px solid; width:720px;}
#left { width:120px;height:120px;border:1px dotted;background:pink;float:left;}
#main { width:150px;height:150px;background-color:red;color:#fff; border:1px dotted; }
#right { width:130px;height:130px;background-color:blue;border:1px dotted;}
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="main">main 这个文字被left挤下去了...</div>
<div id="right">right</div>
</div>
</body>
</html>
在firefox中，不是main和right重叠了，其实是left和main重叠，然后left又把main中间的文字挤下去，看起来就好像main和right重叠一样。
呵呵~
HeLiang7 2009-10-31
- 打赏
- 举报
你说的很正确。
只是main文字被挤到下面来了，而main和left块已经重合了。
马上结帖。
只是main文字被挤到下面来了，而main和left块已经重合了。
马上结帖。
sohighthesky 2009-10-31
- 打赏
- 举报
[Quote=引用 1 楼 kkshiba 的回复:]
你看一下是不是这个效果呢
你少了一个 </div>而后 加上之后却实是和你书上的写的是一样的
我在你人样式 里面给你加了一个main 高 为152 这样就可以看出来 main 和 left 是不是重合了
我试了一上 书上说的没错 如果有什么 不明白的地方 你可以联系我 940439527 说明来意
你可以参考一下我做的这个站 www.dttit.com 济南网站建设
[/Quote]
ls真仔细，我还说怎么会这么奇怪
你看一下是不是这个效果呢
你少了一个 </div>而后 加上之后却实是和你书上的写的是一样的
我在你人样式 里面给你加了一个main 高 为152 这样就可以看出来 main 和 left 是不是重合了
我试了一上 书上说的没错 如果有什么 不明白的地方 你可以联系我 940439527 说明来意
你可以参考一下我做的这个站 www.dttit.com 济南网站建设
[/Quote]
ls真仔细，我还说怎么会这么奇怪
kkshiba 2009-10-31
- 打赏
- 举报
<!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>CSS浮动</title>
<style type="text/css">
<!--
#box{
border:1px solid;
width:720px;
}
#left{
width:150px;
height:150px;
background-color:blue;
border:1px dotted;
float:left;
}
#main{
width:150px;
height:152px;
background-color:red;
border:1px dotted;
}
#right{
width:150px;
height:150px;
background-color:blue;
border:1px dotted;
}
-->
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="main">main</div>
<div id="right">right</div>
</div>
</body>
</html>
你看一下是不是这个效果呢
你少了一个</div>而后 加上之后却实是和你书上的写的是一样的
我在你人样式 里面给你加了一个main 高 为152 这样就可以看出来 main 和 left 是不是重合了
我试了一上 书上说的没错 如果有什么 不明白的地方 你可以联系我 940439527 说明来意
你可以参考一下我做的这个站 www.dttit.com 济南网站建设
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS浮动</title>
<style type="text/css">
<!--
#box{
border:1px solid;
width:720px;
}
#left{
width:150px;
height:150px;
background-color:blue;
border:1px dotted;
float:left;
}
#main{
width:150px;
height:152px;
background-color:red;
border:1px dotted;
}
#right{
width:150px;
height:150px;
background-color:blue;
border:1px dotted;
}
-->
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="main">main</div>
<div id="right">right</div>
</div>
</body>
</html>
你看一下是不是这个效果呢
你少了一个</div>而后 加上之后却实是和你书上的写的是一样的
我在你人样式 里面给你加了一个main 高 为152 这样就可以看出来 main 和 left 是不是重合了
我试了一上 书上说的没错 如果有什么 不明白的地方 你可以联系我 940439527 说明来意
你可以参考一下我做的这个站 www.dttit.com 济南网站建设
