CSS元素浮动位置

Question

 <div class="wrapper">
    <div class="div1"></div>
    <div class="div2">test</div>
  </div>

.wrapper {
  height: 500px;
}
.div1 {
  float: left;
  width: 200px;
  height: 200px;
  background: red;
}
.div2 {
  width: 200px;
  height: 200px;
  background: dimgray;
  
}

代码如上所示，div1向左浮动，此时div2会移动到原先div1的位置，但是被div1遮盖，而内容不会和div1重叠，所以会显示在下面。

此时将div2的margin-top设置为100px, div2会向下移动100px，但是同时浮动的div1也会向下移动100px。这是为什么？浮动元素顶端不是应该尽可能的高吗？应该在包含框的上边缘位置吧？

Answer 1

这里实质上是wrapper的margin-top为 100px，你给wrapper加个overflow:hidden看看效果

Answer 2

两个div重叠这个应该很好理解，浮动元素不在normal flow内，所以就好像不存在一样。
文字下移，是因为浮动元素会导致行框变短，两个div一样大所以行框宽度为0，文字只能"换行"显示，这个和文字环绕的原理是一样的，你减小div1 的宽度就能明白