为什么<p>元素会跳出div出现在下一行？

Question

元素“跳出”其 div 并出现在 div 之外的下一行。元素向右浮动。有两个 div 元素，一个包含徽标和公司地址，下一个包含下拉菜单和欢迎声明。下拉菜单向左浮动。我没有在菜单中包含 html。直到今天才发生这种情况，但我不知道我改变了什么导致了这种情况。我没有对菜单进行任何更改。感谢帮助。新年快乐！

 <div id="head_1">
    <img src="images/Logos/Acts4_Logo.png"/>
   <p> P.O. Box 4524 </br>
       Waterville </br>
       </br>
       (444) 444 - 4444 </br>
        www.Acts.org 
   <p>
 </div>

 <!-- menu and statement -->
 <div id="head_2">
   <p>Keeping Families Warm in Winter</p>

 #contain {  /* wrapper for all content*/
    margin-right: 17%;
    margin-left: 10%;
    background-color: white;
    padding: 0px 10px 1px 10px;
 }

#content {  /* all text and photos */
   margin-top: 20px;
   background-color: white;
}

#head_1 p {     /* Acts address */
  float: right;
  text-align: right;
  font-size: 11pt;
}


#head_2 p {  /* keep fams warm */
  float: right;
  font-family: "cursive standard";
  font-size: 26pt;
}

Answer 1

我不完全确定问题出在哪里，但您的 html:

确实有一些问题

<div id="head_2"> 没有关闭，但我猜这只是在您的示例中遗漏了，而不是在您的实际代码中。
您有开盘 <p> 而不是收盘

<br/> 标签关闭错误（你有 </br>:

<div id="head_1">
  <img src="images/Logos/Acts4_Logo.png"/>
  <p> P.O. Box 4524 </br> <---------------------#3 all of these should be <br/>
  Waterville </br>
  </br>
  (444) 444 - 4444 </br>
  www.Acts.org 
  <p> <--------------#2 should be </p>
</div>

<!-- menu and statement -->
<div id="head_2">
  <p>Keeping Families Warm in Winter</p>
</div> <----- #1 Missing

此外，您还需要清除浮动，您可能会或可能不会这样做。 #contain 似乎是你的包装器，所以如果它实际上是 #head_1 和 #head_2

的父级，你可以添加 overflow: hidden

FIDDLE

为什么<p>元素会跳出div出现在下一行？

Why does <p> element jump out of div and appear in next line below?

html

css