html - CSS位置相对强制元素的高度

Question

我有两个(几乎)克隆元素(#container 和#container-shadow)。相同的 css 规则应该同样适用于它们。但是，第二个 .box3 div 元素的高度是它应有的高度的四倍。这是为什么？

codepen -> http://codepen.io/thiagoh/pen/aJwbOZ

CSS代码

#container {
  position: relative;
  top: -90px;
  left: 400px;
  float: left;
}

#container-shadow div,
#container div {
  width: 280px;
  box-sizing: border-box;
  position: relative;
}

.box3 {
  background-color: lightgray;
  line-height: 24px;
  padding: 4px;
  border: 1px solid black;
}

.box4 {
  background-color: darkgray;
  border: 1px solid black;
  border-top: 0px;
  padding: 0;
  left: 10px;
}

.box4 ul {
  padding: 0;
  margin: 0;
}

.box4 li {
  list-style: none;
  line-height: 24px;
  padding: 4px;
  border-bottom: 1px solid lightgray;
}

HTML代码

<div style="height: 100px;"></div>

<div id="container">
  <div class="box3">
    &nbsp;
  </div>
  <div class="box4">
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
    </ul>
  </div>
</div>

<div id="container-shadow">
  <div class="box3">
    why this element is this height?
  </div>
  <div class="box4">
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
    </ul>
  </div>
</div>

当前结果

预期结果

PS:注意方框的位置。在我的情况下，这是必需的职位。 #container-shadow 上的 clear:both 没有解决我的问题。

Answer 1

你不应该在#container 上使用 float:left，它应该看起来像这样:

#container {
  position: relative;
  top: -90px;
  left: 400px;
}

这是一个更新的代码笔:Codepen