经典论坛's Archiver

kuangmin 发表于 2008-9-4 07:20

关于float

[html]
<html>
<!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=gb2312" />
<title>浮动定位</title>
<style>

div{
        background-color:#eee;
        border:2px solid #aaa;
        width:100px;
        height:100px;
        margin:2px 2px 2px 0px;
}
#a{
        float:left;       
}
</style>
</head>

<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>

</body>
</html>
[/html]

书上说float 使盒子在标准浏览器下不占位，在非标准浏览器下占位，这个我不懂。而上面的例子在标准浏览器下应该使a b重叠的，可实际是b c重叠。不理解

[[i] 本帖最后由 kuangmin 于 2008-9-4 07:31 编辑 [/i]]

uuucat 发表于 2008-9-4 10:24

div是默认一层一层向下排的，a用了浮动，所以b就跟上去了，b没有用浮动，所以c就排到下面一层了:)

kuangmin 发表于 2008-9-4 12:15

楼上没有解决我的问题

omiga 发表于 2008-9-4 12:30

[html]<html>
<!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=gb2312" />
<title>浮动定位</title>
<style>
div{
        background-color:#eee;
        border:2px solid #aaa;
        width:100px;
        height:100px;
        margin:2px 2px 2px 0px;
}
#a{
        float:left;       
}
</style>
</head>
<body>
<div id="a" style="background:#F00;">A</div>
<div id="b" style="background:#0F0;">B</div>
<div id="c" style="background:#00F;">C</div>
</body>
</html>[/html]

kuangmin 发表于 2008-9-4 12:41

为什么效果是b c重叠，不是b在a的右边，float没起作用吗？

omiga 发表于 2008-9-4 13:01

再看
[html]<html>
<!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=gb2312" />
<title>浮动定位</title>
<style>
div{
        background-color:#eee;
        border:2px solid #aaa;
        width:100px;
        height:100px;
        margin:2px 2px 2px 0px;
}
#a{
        float:left;       
}
</style>
</head>
<body>
<div id="a" style="background:#F00;">A</div>
<div id="b" style="background:#0F0; width:400px;">B</div>
<div id="c" style="background:#00F;">C</div>
</body>
</html>[/html]

kuangmin 发表于 2008-9-4 13:03

楼上效果出来了

tmulmt 发表于 2008-9-4 15:37

其实只加个宽度，#4 #6为什么就不同了呢？

idsuzhou 发表于 2008-9-4 19:12

在IE6下 浏览  A还是占据空间！  
是否是IE6的问题！

zhuying0557 发表于 2008-9-10 14:09

<html>
<!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=gb2312" />
<title>浮动定位</title>
<style>
div{
        background-color:#eee;
        border:2px solid #aaa;
        width:100px;
        height:100px;
        margin:2px 2px 2px 0px;
}
#a{
        float:left;       
}
#b{
        float:left;       
}
#c{
        float:left;       
}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</body>
</html>

lijun198296 发表于 2008-9-10 16:10

[color=Red]<html>[/color]
<!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=gb2312" />
<title>浮动定位</title>
<style>
div{
       background-color:#eee;
       border:2px solid #aaa;
       width:100px;
       height:100px;
       margin:2px 2px 2px 0px;
}
#a{
       float:left;      
}
#b{
       float:left;      
}
#c{
       float:left;      
}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</body>
</html>

zbm2001z 发表于 2008-9-10 21:25

[html]
<html>
<!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=gb2312" />
<title>浮动定位</title>
<style>
div{
        background-color:#eee;
        border:2px solid #aaa;
        width:100px;
        height:100px;
        margin:2px 2px 2px 0px;
}
#a{
        float:left;       
}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
[/html]
浮动元素a[color=red]堆叠[/color]于块元素b的z轴上方，
由于块元素b的宽度限制，行内元素文本b排列在浮动元素a文档流下方（块元素b为默认的overflow：visible）；

[html]
<html>
<!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=gb2312" />
<title>浮动定位</title>
<style>
div{
        background-color:#eee;
        border:2px solid #aaa;
        width:100px;
        height:100px;
        margin:2px 2px 2px 0px;
}
#a{
        float:left;       
}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">dc</div>
</body>
</html>
[/html]
块元素c排列于块元素b文档流的下方，
行内元素文本dc[color=red]层叠[/color]于行内元素文本b的z轴上方。

扩展示例
层叠关系：
[html]
<html>
<!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=gb2312" />
<title>浮动定位</title>
<style>
div{
        background-color:#eee;
        border:2px solid #aaa;
        width:100px;
        height:100px;
        margin:2px 2px 2px 0px;
font:bold 100px/100px "";
}
#b{
        margin-top:-55;background:#f00;
}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
[/html]
堆叠关系：
[html]
<html>
<!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=gb2312" />
<title>浮动定位</title>
<style>
div{
        background-color:#eee;
        border:2px solid #aaa;
        width:100px;
        height:100px;
        margin:2px 2px 2px 0px;
font:bold 100px/100px "";
position:relative;
}
#b{
        margin-top:-55;background:#f00;
}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
[/html]

堆叠：块级元素及其包含的行内元素在z轴上产生偏移，相互覆盖
层叠：块级元素仅仅自身相互覆盖（依照源码次序），而它们所包含的行内元素不被连带覆盖，只在这些行内元素之间产生相互覆盖（依照源码次序）。

页: [1]



Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.