浮动和保证金最高

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;
}

为什么在此示例中float：left不起作用？ 为什么要设置#home而不是父母的边际最高职位？

直播： http ： //jsfiddle.net/tLuTS/10/

Answer 1

这两个元素都需要浮动，第二个元素必须具有clear:both Both set。

例

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”的优先级更高，因此float不起作用。

Answer 5

我假设您要在footer同时添加one和two 。 所以你必须申请

float: left;

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