CSS 浮动内容创建空白并与其他内容重叠 div

Question

我目前正在创建响应式作品集，运行遇到了一些麻烦。

在某个断点（css媒体查询）之前，我网站'About'部分的第二段和第三段是浮动的。随着 window 变小，文本开始与页脚重叠并最终在底部和侧面创建一个空白。当它到达断点时，浮点数的值为 'none'.

我怎样才能使容器的高度由容器中的内容量决定（即正常行为）？我试过 clearfix，但似乎不起作用。

HTML

<body>
    <nav>
        <div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a><div id="menu-icon"></div></div><div class="clear"></div>
            <ul id="main-links">
                <a href="#"><li><span class="word-position">About</span></li></a>
                <a href="#"><li><span class="word-position">Work</span></li></a>
                <a href="#"><li class="last-child"><span class="word-position">Contact</span></li></a>
            </ul>
    </nav>
    <div id="main-container">
        <div id="introductory-background">
            <div id="introductory-overlay">
                <div id="introductory-content">
                    <div id="introductory-container">
                        <h1 id="role-header">Junior Web Developer</h1>
                        <h3 id="role-support-text">...but that's not all I can do</h3>
                        <a id="read-more" class="no-select">Read More</a>
                    </div>
                </div>                 
            </div>
        </div>
        <div id="about-section">
            <br />
            <br />
            <div id="photo-frame">
                <div id="picture"></div>
            </div>
            <br />
            <div id="about-text-container">
                <p>Hi There! My name is Ed Garbutt, a Junior Web Developer based in South Buckinghamshire, with a huge passion for all things programming.</p>
                <br />
                <p id="about-left-side" class="side-by-side">Sadly, I'm not like most Developer out thers. I don't drink Red Bull or Monster Cans. I'm not a fan of Start Wars. I don't read Marvel Comic Books, but I am someone who likes going outside here and then.</p>
                <p id="about-right-side" class="side-by-side">All jokes aside, what you <b>will</b> get is someone who prides himself on attention to details, who will always rise to a challenge ans is constantly looking to better himself, building upon his existing knowledge of programming languages and frameworks.</p>
            </div>
        </div>
    </div>
    <footer>
        <p id="footer-text">
            &#169; 2016 Ed Garbutt. All rights reserved.
        </p>
    </footer>
</body>

CSS

    body {
    margin: 0;
}
nav {
  width: 100%;
  height: 50px;
  position: fixed;
  background-color: rgb(40, 40, 40);
  border-bottom-style: solid;
  border-bottom-color: rgb(238, 0, 0);
  border-bottom-width: 7.5px;
  padding-top: 14px;
  z-index: 10;
}

#logo {
    position: relative;
    bottom: 5px;
    font-size: 30px;
    padding-left: 8px;
    float: left;
    font-family: bebas;
}

#word-1 {
    color: rgb(0, 154, 205);
}

#word-2 {
    color: rgb(255, 250, 250);
}

ul#main-links {
  list-style: none;
  margin: 0;
  padding-right: 50px;
  float: right;
  height: 100%;
  border-bottom: 7.5px solid transparent;
  display: block;
font-size: 0;
}

ul#main-links li {
  display: inline-block;
  text-align: center;
  border-bottom-style: solid;
  border-bottom-width: 7.5px;
border-bottom-color: rgb(238, 0, 0);
  color: white;
  font-family: arcon;
  font-size: 18px;
  height: 100%;
    width: 90px;
  position: relative;
  z-index: 2;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
    color: white;
}

a:active {
  text-decoration: none;
    color: white;
}

a#logo-link {
    text-decoration: none;

}

a#logo-link:visited {
  text-decoration: none;
    color: inherit;
}

a#logo-link:active {
  text-decoration: none;
    color: inherit;
}

ul#main-links > a > li > span.word-position {
  position: relative;
    top: 5px;
}

#menu-icon {
    height: 48px;
    width: 48px;
    display: none;
    cursor: pointer;
    background-image: url("../images/hamburg-white-2.png");
}

#main-container {
    padding-top: 71.4px;
}

@media screen and (min-width: 656px) {
    ul#main-links {
        display: block !important;
    }
}

@media screen and (max-width: 656px) {

    nav {
        height: initial;
    }

    #logo {
        width: 100%;
        float: none;
        padding-left: 0;
        text-align: center;
        bottom: 8px;
    }

    #menu-icon {
        display: inline-block;
/*        float: right;*/
        position: absolute;
        right: 10px;
        top: -2px;
    }

    ul#main-links {
        display: none;
        float: none;
        padding-right: 0;
        padding-left: 0;
        width: 100%;
    }

    ul#main-links li {
        width: 100%;
        display: block;
        border: none;
        padding: 10px 0;
    }

    ul#main-links li:not(.last-child) {
        border-bottom-style: solid;
        border-bottom-color: rgb(238, 0, 0);
        border-bottom-width: 2.5px;
    }

    ul#main-links > a > li > span.word-position {
        top: 0px;
    }

    #main-container {
        padding-top: 62.4px;
    }
}

@media screen and (max-width: 400px) {
   #logo {
        bottom: 7.5px;
        font-size: 23px;
        padding-left: 10px;
        text-align: left;
    } 

    #menu-icon {
        height: 32px;
        width: 32px;
        background-image: url("../images/hamburg-white-1.png");
        top: 0.4px;
        right: 20px;
    }

    #main-container {
        padding-top: 52.4px;
    }
}



/* ----INTORDUCTION---- */

#introductory-background {
    background-image: url('../images/eternity-1024x768.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
/*    min-height: 527px;*/
    height: 90vh;
    background-size: 100% 100%;
    overflow: auto;
}

#introductory-overlay {
    display: table;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

#introductory-content {
    margin-left: auto;
    margin-right: auto;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#introductory-container {
    position: relative;
    bottom: 60px;
}

h1#role-header {
    display: block;
    position: relative;
    right: 5em;
    opacity: 0;
    font-size: 48px;
    color: rgb(255, 250, 250);
}

h3#role-support-text {
    display: block;
    opacity: 0;
    position: relative;
    top: 20px;
    font-size: 30px;
    color: rgb(255, 250, 250);
}

#read-more {
    border-radius: 38px;
    background-color: rgb(255, 250, 250);
    padding: 0.5em 1.5em;
    font-size: 24px;
    cursor: pointer;
}

@media screen and (max-width: 656px) {

    #introductory-container {
        bottom: 60px;
    }

    h1#role-header {
        font-size: 37px;
    }

    h3#role-support-text {
        top: 15px;
        font-size: 24px;
    }

    #read-more {
        font-size: 19px;
    }
}

@media screen and (max-width: 400px) {

    #introductory-container {
        bottom: 72.5px;
    }


   h1#role-header {
        font-size: 28px;
    }

    h3#role-support-text {
        top: 11px;
        font-size: 20px;
    }

    #read-more {
        font-size: 16px;
    }
}


/* -------------------- */
/* -------ABOUT-------- */

#about-section {
    width: 100%;
    height: 500px;
    background-color: rgb(131, 111, 235);
}

#photo-frame {
    margin: 0 auto;
    background-color: royalblue;
    width: 180px;
    height: 180px;
    border-radius: 100px;
    border-style: solid;
    border-color: beige;
    border-width: 7.5px;
    z-index: 2;
}

#photo-frame > #picture {
    width: 100%;
    height: 100%;
    background-image: url('../images/Ed.png');
    border-radius: 100px;
}

#about-section > #about-text-container {
    margin: 0 auto;
    width: 80%;
}

#about-section > #about-text-container > p {
    margin: 0;
    text-align: center;
/*    padding: 0 3rem;*/
    font-size: 22px;
}

#about-section > #about-text-container > p.side-by-side {
/*    display: inline-block;*/
    width: 45%;
    text-align: justify;
}

#about-section > #about-text-container > p#about-left-side {
    float: left;
}

#about-section > #about-text-container > p#about-right-side{
    float: right;
}

@media screen and (max-width: 868px) {
    #about-section > #about-text-container > p.side-by-side {
    /*    display: inline-block;*/
        width: 100%;
    }

    #about-section > #about-text-container > p#about-left-side {
        float: none;
        padding-bottom: 1.5rem;
    }

    #about-section > #about-text-container > p#about-right-side{
        float: none;
    }
}

@media screen and (max-width: 656px) {
    #photo-frame {
        width: 150px;
        height: 150px;
    }

    #about-section > #about-text-container {
        width: 90%;
    }

    #about-section > #about-text-container > p {
        text-align: justify;
        padding: 0 1.5rem;
        font-size: 20px;
    }
}

@media screen and (max-width: 400px) {
    #photo-frame {
        width: 125px;
        height: 125px;
    }

    #about-section > #about-text-container {
        width: 100%;
    }

    #about-section > #about-text-container > p {
        padding: 0 0.5rem;
        font-size: 18px;
    }
}

/* -------------------- */
/* -------FOOTER------- */

footer {
    width: 100%;
    background-color: black;
}

footer > p#footer-text {
    margin: 0;
    text-align: center;
    font-family: arial;
    color: rgb(169, 169, 169);
    padding: 20px;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* -------------------- */

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Answer 1

所以这归结为您的 p.side-by-side 设置为 45% 的定义。

如果您不希望在小屏幕尺寸上有列，则方法是仅设置 45% 的值并在移动设备上方设置一个断点。

你使用非移动优先的方法使这件事变得更难（在我看来）。更简单的方法是不向这些列添加任何宽度样式，并且只添加 45% 和浮动，一旦屏幕为 above（比如）768px。换句话说，您的媒体查询通常会有 min 值，而不是 max.

我认为开始考虑移动优先的一个好方法是认识到移动布局使用的 "less" CSS 比桌面布局。所以你保持简单，只使用语义 html，然后随着屏幕尺寸的增加添加样式到 start 制作列等.

Answer 2

试试这个：

#about-section {
    width: 100%;
    background-color: rgb(131, 111, 235);
}

描述

您正在使用 #about-section id 移除高度属性或使用 height:auto，您已经给出了固定高度。并在 p 标签 ID 中也使用 float:left。

here your update code

CSS 浮动内容创建空白并与其他内容重叠 div

CSS Float content creating whitespace and overlapping other div

html

css

css-float

clearfix