61,115
社区成员
发帖
与我相关
我的任务
分享一个css浮动定位的问题。菜鸟免进。
<style type="text/css">
#p1
{
width:200px;
height:300px;
background-color:#F00;
}
#p2
{
width:200px;
height:300px;
background-color:#333;
float:right;
}
</style>
</head>
<body>
<p id="p1">段落一</p>
<p id="p2">段落一</p>
</body>
为什么p2不会浮动到右上角，而是只浮动到了右侧。不是说浮动对象已脱离了正常的文档流了吗？
问题补充：
有朋友说p1不允许有元素与之同行。
但我的疑问是：p2已脱离了文档流，为什么还会受到p1的影响呢？不在一个层上还会有影响？
#p1
{
width:200px;
height:300px;
background-color:#F00;
}
#p2
{
width:200px;
height:300px;
background-color:#333;
float:right;
}
</style>
</head>
<body>
<p id="p1">段落一</p>
<p id="p2">段落一</p>
</body>
为什么p2不会浮动到右上角，而是只浮动到了右侧。不是说浮动对象已脱离了正常的文档流了吗？
问题补充：
有朋友说p1不允许有元素与之同行。
但我的疑问是：p2已脱离了文档流，为什么还会受到p1的影响呢？不在一个层上还会有影响？
...全文
请发表友善的回复…
发表回复
幕子丿昔 2011-07-06
- 打赏
- 举报
这么浮躁 呵呵
lijia_415 2011-07-06
- 打赏
- 举报
以上回答全部不对，真正的答案是：
加上 * {margin:0; padding:0}
浏览器有默认的间距。
加上 * {margin:0; padding:0}
浏览器有默认的间距。
luoxiangyu001 2011-07-06
- 打赏
- 举报
这玩意你会用就行了额，原理什么的没研究过，上面已经说了，float：left表示靠左排列，这样就成了块级元素，如果独占一行 在加个clear 去除一行中的其他块级元素，就行了
yo010yo 2011-07-06
- 打赏
- 举报
[Quote=引用 8 楼 chendong_j 的回复:]
p1是行级元素啊，p2是块级吧，所以p1占满了自身所在的那一行吧
[/Quote]
这个是正解。。
P1没加 float:left;
所以还是占了一行
p1是行级元素啊，p2是块级吧，所以p1占满了自身所在的那一行吧
[/Quote]
这个是正解。。
P1没加 float:left;
所以还是占了一行
chendong_j 2011-06-28
- 打赏
- 举报
p1是行级元素啊，p2是块级吧，所以p1占满了自身所在的那一行吧
Acesidonu 2011-06-28
- 打赏
- 举报
float只对后面的元素有影响。
jhrxx 2011-06-28
- 打赏
- 举报
[Quote=引用楼主 phper002 的回复:]
<style type="text/css">
#p1
{
width:200px;
height:300px;
background-color:#F00;
}
#p2
{
width:200px;
height:300px;
background-color:#333;
float:right;
}
</style>
</head>
<body>
<p……
[/Quote]
为什么菜鸟免进？ 进来看看学习下都不行么？
谁告诉你float是让DOM脱离文档流了？
<style type="text/css">
#p1
{
width:200px;
height:300px;
background-color:#F00;
}
#p2
{
width:200px;
height:300px;
background-color:#333;
float:right;
}
</style>
</head>
<body>
<p……
[/Quote]
为什么菜鸟免进？ 进来看看学习下都不行么？
谁告诉你float是让DOM脱离文档流了？
phper002 2011-06-28
- 打赏
- 举报
一楼的朋友答非所问。我要弄明白的是float的问题。
鄙视其它光说费话，没真本事的人。
我想知道的是原理。是为什么？谁能透彻地解析一下呢？
鄙视其它光说费话，没真本事的人。
我想知道的是原理。是为什么？谁能透彻地解析一下呢？
kk297173176 2011-06-28
- 打赏
- 举报
float不会用，估计clear楼主也不会用了，建议lz好好看看这两个东东。。。。。哦 应该是深入研究一下。。。
kk297173176 2011-06-28
- 打赏
- 举报
[Quote=引用 2 楼 a16696945 的回复:]
菜鸟免进。。。。
这也就是个菜鸟问题。。。
[/Quote]
真的是个菜鸟问题
#p1样式里加一句：float:left;
菜鸟免进。。。。
这也就是个菜鸟问题。。。
[/Quote]
真的是个菜鸟问题
#p1样式里加一句：float:left;
a16696945 2011-06-28
- 打赏
- 举报
菜鸟免进。。。。
这也就是个菜鸟问题。。。
这也就是个菜鸟问题。。。
kui5656 2011-06-28
- 打赏
- 举报
莫意思！就不告诉你！
yoyoyuye 2011-06-28
- 打赏
- 举报
菜鸟免进。
挨踢直男 2011-06-27
- 打赏
- 举报
脱离文档流的是绝对定位
像这样
像这样
<style type="text/css">
#p1
{
width:200px;
height:300px;
background-color:#F00;
}
#p2
{
width:200px;
height:300px;
background-color:#333;
position:absolute;
right:0;
top:0
}
</style>
</head>
<body>
<p id="p1">段落一</p>
<p id="p2">段落一</p>
</body>