尽管有块属性，但 HTML 元素重叠答案

【问题标题】：HTML elements overlapping despite block attribute尽管有块属性，但 HTML 元素重叠
【发布时间】：2015-03-19 13:41:10
【问题描述】：

尝试通过位置等学习 CSS 的更高级功能。以 CSS Zen Garden 为指导。

但是，我在一个部分中有我的标题和导航栏。在它下面有一个 Div。

我在 div 周围放置了一个 2px 的蓝色边框，但由于某种原因，它从上一部分下方的页面开始数英里。我在这里有一个codepen： http://codepen.io/anon/pen/WbLwWV

HTML：

<body class="page-wrapper">
    <div class="title-section">
    <section>
        <header>
            <h1><img src="header_logo.png" height="61" width="394"></h1>
        </header>
        <nav class="navigation">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Upcoming Events</a></li>
                <li><a href="">Recruitment</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Concerts &amp; Festivals</a></li>
                <li><a href="">Gallery</a></li>
                <li><a href="">Contact Us</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Choir in the Community</a></li>
            </ul>
        </nav>
        <div class="header-image"></div>
    </section>
</div>
        <div class="intro">
            <p>The Choir</p>
        </div>

</body>

CSS：

body {
    font-family: 'Open Sans',Frutiger,"Frutiger Linotype",Univers,Calibri,"Gill Sans","Gill Sans MT","Myriad Pro",Myriad,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.25em;
}
.page-wrapper {
}
.title-section {
    background: linear-gradient(to bottom, #FFFFFF 0%, #EDF6FF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: left;
    height: 480px;
    width: 100%;
}
header {
    margin: 0 auto;
    max-width: 1040px;
    position: relative;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1;
}
nav {
    display: block;
    margin: 0 auto;
    min-height: 30px;
    width: 80%;
}
nav ul {
    margin: 0 auto;
}
nav ul li a:hover {
    border-bottom: 1px solid #A3E0FF;
    border-color: #A3E0FF;
}
.header-image {
    background: url("header_photo.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid;
    height: 303px;
    margin: 0 auto;
    width: 800px;
}
.intro {
    border-top: 5px solid blue;
    height: 500px;
    position: relative;
    top: 100px;
    width: 100%;
}

如果有人能指出正确的方向并解释原因，那就太好了！

谢谢迈克

【问题讨论】：

您能更清楚地说明您想要实现的目标吗？
您的问题是 float: left 在您的 .title-section CSS 规则中

标签： html css

【解决方案1】：

发生这种情况是因为您使 .title-section 向左浮动，而您的 .intro 具有相对位置。现在，两者相互重叠，因此文档顶部的蓝色边框。并且您的.intro 的内容在.title-section 之后折叠，因此出现在它旁边。

在这张图片中，您可以看到发生了什么（.title-section 为红色边框，.intro 为蓝色边框）：

如果您希望它们像块一样堆叠在相同的布局流程中，请不要浮动标题部分并删除您的简介中的position: relative（请参阅this codepen 以获取插图）。

我推荐你this article about float进一步了解。

【讨论】：

啊，这样的疏忽——这是以前冒险的结果。我一定是个盲人。感谢您指出。
不客气。我添加了对你的块发生了什么的额外解释。