Question

为什么不能显示三个br元素？

＆＃13;

#content1{
  float:left;
  width:300px;
  height:300px;
  border:1px solid red;
}
#content2{
  width:300px;
  height:700px;
  border:1px solid green;
}

＆＃13;

  
   <div id="content1">
      <p>content1</p>
  </div>
  <div id="content2">
      <br/><br/><br/>
      <p>content2</p>
      <br/><br/><br/>
      <p>content2</p>
  </div>

＆＃13;

从html结构中，在content2之前有三个分隔线，在content2之后有三个分隔线，只能显示第二个三个分隔线，为什么可以显示前三个分隔线？

在我看来，结果将如下。

在我的html div中，content1和div内容2将相互重叠，为什么前三个空白行会受到浮动div content1的影响？

让我们再添加两个例子来说明我的困惑。

＆＃13;

#content1{
  float:left;
  width:300px;
  height:300px;
  border:1px solid red;
}
#content2{
  width:300px;
  height:700px;
  border:1px solid green;
}

＆＃13;

  
   <div id="content1">
      <p>content1</p>
  </div>
  <div id="content2">
      <p>haha</p>
      <br/><br/><br/>
      <p>content2</p>
      <br/><br/><br/>
      <p>content2</p>
  </div>

＆＃13;

显示的效果。

＆＃13;

#content1{
  float:left;
  width:300px;
  height:300px;
  border:1px solid red;
}
#content2{
  width:300px;
  height:700px;
  border:1px solid green;
}

＆＃13;

  
   <div id="content1">
      <p>content1</p>
  </div>
  <div id="content2">
      <br/><br/><br/>
      <p>content2</p>
      <br/><br/><br/>
      <p>content2</p>
  </div>

＆＃13;

显示的效果。

html3只比htm4多一行：

哈哈

。
在html3中可以显示第一个空白行，为什么第一个空白行在html4中消失？
这个现象背后的研究是什么？在html4中吃了我的第一个空白是什么？为什么不将html4解析为下图？

Answer 1

清除第二个div #content2。

＆＃13;

#content1{
  float:left;
  width:300px;
  height:200px;
  border:1px solid red;
}
#content2{
  width:300px;
  height:700px;
  border:1px solid green;
  clear: both;
}

＆＃13;

 <div id="content1">
  <p>content1</p>
  </div>
  <div id="content2">
  <br/><br/><br/>
  <p>content2</p>
  <br/><br/><br/>
  <p>content2</p>
  </div>

＆＃13;

Answer 2

我为新的p标签添加了虚线边框。检查它的起始位置。盒子模型从头开始，但内容＆＃39; haha＆＃39;只有在浮动框之后才能看到。

顶部间距是该p标签的边距。

同样，换行符实际上在顶部可见。由于换行没有任何视觉内容，我们在输出中没有注意到它们。

＆＃13;

#content1{
  float:left;
  width:300px;
  height:300px;
  border:1px solid red;
}
#content2{
  width:300px;
  height:700px;
  border:1px solid green;
}

＆＃13;

  
   <div id="content1">
      <p>content1</p>
  </div>
  <div id="content2">
      <p style="border: 2px dashed green;">haha</p>
      <br/><br/><br/>
      <p>content2</p>
      <br/><br/><br/>
      <p>content2</p>
  </div>

＆＃13;

Answer 3

因为您float #content1需要清除#content2，或只是从float:left移除#content1

#content1{
  width:300px;
  height:300px;
  border:1px solid red;
}
#content2{
  width:300px;
  height:700px;
  border:1px solid green;
 /* clear:both if you don't want to remove float left */
}

<div id="content1">
      <p>content1</p>
  </div>
  <div id="content2">
      <br/><br/><br/>
      <p>content2</p>
      <br/><br/><br/>
      <p>content2</p>
  </div>

Answer 4

在afelixj的帮助下，我明白了。我们可以在html体中添加更多白线，例如12
，以观察css的外观。

<html>
<style type="text/css">
    #content1{
      float:left;
      width:300px;
      height:300px;
      border:1px solid red;
    }
    #content2{
      width:300px;
      height:700px;
      border:5px solid green;
    }
</style>
<body>
    <div id="content1">
        <p>content1</p>
    </div>
    <div id="content2">
        <p style="margin:0px;border: 2px dashed green;"></p>
        <br/><br/><br/>
        <br/><br/><br/>
        <br/><br/><br/>
        <br/><br/><br/>
        <br/><br/><br/>
        <br/><br/><br/>
        <p>content2</p>
        <br/><br/><br/>
        <p>content2</p>
   </div>
</body>
</html>

为什么无法显示前三个分隔线？

4 个答案: