html - 一起上课 'sticking'

Question

我正在尝试用 HTML5+CSS3 制作一个简单的 1page 响应式网站，它在一个大的可滚动页面上有几个部分彼此下方，如下所示:

Section 1
[content]

Section 2
[content]

Section 3
[content]

出于某种原因，在修复“关于”部分的 css 时，它似乎已“卡住”到其下方的“连接”部分(参见 jsfiddle)。它在宽屏幕上正确显示，但在窄屏幕上(如 jsfiddle 中的屏幕可能会显示)，“连接”类将放置在“关于”部分的图像下方，即右侧。

当我对 about 和 connect 类进行 inspect-element 时，它们看起来也很奇怪。两者似乎都丢失了内容，“connect”类认为其内容在其上方而不是下方？

我不知道我弄坏了什么，但似乎我遗漏了一些明显的东西。任何帮助将不胜感激!

HTML

<div class="about">
    <header>
        <h2 id="about">About</h2>
        <hr>
    </header>

    <div class="aboutContainer">
        <div class="aboutText">
            <p>Text text text</p>
        </div>

        <div class="aboutImg">
            <img src="img/about_photo.jpg" />
        </div>
    </div>
</div>

<div class="connect">
    <header>
        <h2 id="connect">Connect</h2>
        <hr>
    </header>

    <div class="links">
        <ul>
            <li><a href="#"><img src="img/logo1.png" /></a></li>
            <li><a href="#"><img src="img/logo2.png" /></a></li>
            <li><a href="#"><img src="img/logo3.png" /></a></li>
        </ul>                       
    </div>
</div>  

CSS

.aboutContainer {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.aboutText {
    display: inline;
    width: 60%;
    height: auto;
    margin: 0;
    float: left;
}

.aboutImg {
    display: inline;
    display: block;
    width: 30%;
    float: right;
    margin: 0;
}

.aboutImg img {
    min-width: 240px;
}

.connect {
    width: 100%;
    display: inline;
    vertical-align:bottom;
}

.links {
    float: left;
    width: 35%;
}

.connect ul {
    width: 100%;
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

.connect li {
    display: inline;
}

.connect img {
    display: inline;
    width: 32%;
}

Answer 1

在 connect div 之前添加以下内容。

<div class='clearfix'></div>

以及以下 CSS:

.clearfix {
  clear: both;
}

听说是jsfiddle