Html CSS固定大小标题：右侧浮动联系人信息

我有一个基本的固定宽度标题。公司名称应位于标题的最左侧，联系人信息应位于标题的最右侧

我将联系人信息浮动到右侧，但它现在显示在标题之外。我不知道我做错了什么

小提琴：

CSS

#header {
    width: 960px;
    background-color: #CCC;
    margin: 40px auto 0px auto;
    padding: 10px 10px 10px 10px;
    border: 1px solid #000;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}
.contact {
    text-align: right;
    float: right;
    width: 500px;
}

HTML

<div id="header">
<h1>Acme, Inc.</h1>
<p class="contact">Serving XYZ Since 2002<br />
Service 1, Service 2, Service 3, Service 4 and Service 5</p>
<p class="contact">(555) 555-5555</p>
<p class="contact">7438 Example Street<br />
Anytown, CA 55555</p>
</div>

Acme公司。
自2002年起为XYZ服务

服务1、服务2、服务3、服务4和服务5
（555）555-5555
7438示例街

加利福尼亚州安尼镇，邮编55555

试试看，这是因为h1占据了标题中的所有空间

#header h1{
 display:inline-block;
}

---

试试这个，这是因为h1占据了标题中的所有空间

#header h1{
 display:inline-block;
}

---

您应该将

overflow:auto

应用于

header

元素，使其显示浮动的内部内容，因为现在它在文档流中不存在，因此无法扩展父级的大小

---

您应该将

溢出：auto

应用于

标题

元素，使其显示浮动的内部内容，因为它现在不存在于文档流中，因此无法扩展父元素的大小

h#元素是块级元素，因此默认为占据整个宽度并向下推其他内容。设置

显示：内联块将修复此问题。请参阅我对您的小提琴的更新：
h#元素是块级元素，因此默认情况下会占据整个宽度并向下推其他内容。设置
显示：内联块将修复此问题。查看我对您的小提琴的更新：