为什么 div 中的文本不从顶部显示

Question

我在学习CSS，有些行为我不明白，请看下面的代码片段。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    #testDiv{
      width: 100px;
      height: 100px;
      background-color: lightblue;
      float: left;
    }
    #testDiv1{
      width: 100px;
      height: 200px;
      background-color: red;
    }
    </style>
  </head>
  <body>
    <div id="testDiv"></div>
    <div id="testDiv1">
      <p>
        This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. 
      </p>
    </div>
  </body>
</html>

我知道第一个 div 会覆盖第二个，但为什么第二个 div 中的文字没有被覆盖？从第一个div.

之后的位置开始显示

Answer 1

I mean why the text doesn't display from the top of the page, you can see, it display under the first div.

第一个 div 将 2:nd div 向下推，它不会漂浮在顶部，正如属性 "float" 可能暗示的那样。

要使文本从顶部开始，请在第一个 div 上使用绝对定位，或者为第二个提供与第一个 div 匹配的负边距或左边距（如下例所示）的宽度，它将排在第一个旁边。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    #testDiv{
      width: 100px;
      height: 100px;
      background-color: lightblue;
      float: left;
    }
    #testDiv1{
      margin-left: 100px;           /*  added    */
      width: 100px;
      min-height: 200px;            /*  changed  */
      background-color: red;
    }
    </style>
  </head>
  <body>
    <div id="testDiv"></div>
    <div id="testDiv1">
      <p>
        This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. 
      </p>
    </div>
  </body>
</html>

Answer 2

Floated 个元素流出，因此第一个元素与第二个元素重叠。但是，它们很特别，因为它们会收缩线框：

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

在这种情况下，由于它和下面的元素一样宽，所以顶部的行框没有宽度，因此文本会向下移动到浮动之后的行框，这些行框有一定的宽度。

如果你不想让第一个元素收缩第二个元素的line boxes，你应该使用其他out-of-flow模式如absolute positioning:

In the absolute positioning model, a box [...] is removed from the normal flow entirely (it has no impact on later siblings).

#testDiv {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  opacity: .8;
  position: absolute;
}
#testDiv1 {
  width: 100px;
  height: 200px;
  background-color: red;
}

<div id="testDiv"></div>
<div id="testDiv1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>

为什么 div 中的文本不从顶部显示

Why text in div doesn't display from top

css

css-float