Question

<div id="home">
    <div id="logo"></div>
    <div id="foot">
        <div id="one">
            <span id="aaa" class="test">aaa</span>
        </div>
        <div id="two">
            <span id="bbb" class="test">bbb</span>
        </div>

    </div>
</div>


#home {
  width: 400px;
  height: 400px;
}

#logo {
    height: 200px;
    background-color: green;
}

#foot {
   height: 200px;
}

#one {
 height: 200px;
 width: 200px;
 background-color: red;
}

#two {
 height: 200px;
 width: 200px;
 background-color: blue;
 float: left;    
}

.test {
  margin-top: 50px;
  margin-left: 50px;
  background-color: yellow;
}

为什么在这个例子中浮动：左边没有工作？为什么#home而不是父母的保证金最高位置？

现场：http://jsfiddle.net/tLuTS/10/

Answer 1

两个元素都需要浮动，第二个元素应该设置为clear:both。

<强> Example

Answer 2

浮动在您的示例中不起作用，因为您需要在同一行上浮动所需的两个元素。

所以我用#one和#two浮动左边更新了你的例子。还添加了一些IE浮动修复程序。 http://jsfiddle.net/tLuTS/11/

我不确定您使用margin-top尝试实现的目标。

Answer 3

只需添加此

即可

#one {
 height: 200px;
 width: 200px;
 background-color: red;
    float:left;
}

以下是jsfiddle.net.

的更新版本

Answer 4

这是因为你的内联CSS“测试”。对于Span Id =“bbb”，有两个CSS定义一个是“test”，另一个是“two”。 “测试”的优先级更高，因此浮动不起作用。

Answer 5

我假设您希望one中都有two和footer。所以你必须申请

float: left;

到one也是如此。关于边距：我只能看到应用于黄色背景文本的边距。这些是<span> s，所以内联元素。制作这些块级元素，例如<p>，以使边距生效。

浮动和保证金顶部

5 个答案: