Question

情况是：

HTML：

<div id="main">
    <div id="a"></div>
    <div id="b">Some Text</div>
</div>

CSS：

#a{
    float:left;
    width:800px;
    height:150px;
    background-color:#CCC;
}

#b{
    width:1000px;
    height:100px;
    background-color:#9CC;
}

结果： enter image description here

为什么文字不在 div＃a 后面？为什么“Some Text”表现得好像 div＃a 仍然处于正常流程？如何强制文本按预期行事（在div＃a下）？

更新当我的意思是在，我的意思是在Z轴下面，而不是在Y.下面的div应该保持在这个位置，唯一需要移动的部分是文本。

Answer 1

如果你浮动一个元素，下一个元素将“触摸”它，如果有它的地方，它是一个块级元素（本机或由CSS设置）。

如果你想让元素“不”彼此相邻，那么就不要使用float！请记住，它们必须是块级别才能相互低下。

Float不会“抬起”元素，例如position: absolute会这样做。

Answer 2

看看这个：

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

我认为z-index语句也可能有用

附录

<style type="text/css">
<!-- 
#id {
position:relative;
}

#a{
/* float:left;  */
 position: absolute;
 top:0%;
 left0%;
width:800px;
height:150px;
background-color:#CCC;
    z-indez:1;
}

#b{
position: absolute;
 top:0%;
 left0%;
width:1000px;
height:100px;
background-color:#9CC;
    z-index:-1;
}

诀窍（在chrome，ff，IE6中）我无法让它工作，直到我给id = b一个负z索引信任，这很有帮助

Answer 3

http://www.w3.org/wiki/CSS/Properties/float

•left
该元素生成一个浮动到左侧的块框。内容从盒子的右侧开始流动，从顶部开始。

#b的内容正在发挥作用。它漂浮在它前面的浮动元素的右侧。

因此，如果您想要一个“分层”效果，请使用能够正确提供它的CSS声明：position

注意：让#a定位于其父级，而不是<body>：

#main { position:relative }
#a { position:absolute }

Answer 4

浮动元素浮动到非浮动元素的左侧，如蓝色元素。要强制浮动元素下方的蓝色元素，您可以将clear: left;应用于它。

Answer 5

如果你的两个div ID都有浮动：左侧分配，那么第二个div #b将跟随并进入#a

Answer 6

添加此代码：

float:left;

到#b style

Answer 7

为#a，＃b

提供显示块

浮动div中的文本

7 个答案: