css - 页脚在页脚中包含非页脚元素

Question

抱歉，如果标题没有解释清楚。我有页脚，它包括页脚上方的所有内容。如果我在页脚上方有文本(作为页脚标记的同级)，则页脚将文本作为页脚的一部分包含在内。这是我的代码:

<section id="description">
    <div id="description1">
        <div class="container">
            <h3><em>text</em></h3>
            <p>text</p>
        </div>
    </div>

    <div id="description2">
        <div class="container">
            <h3><em>text</em></h3>
            <p>text</p>
        </div>
    </div>
</section>

<footer>
    <div class="container">
        <p id="copywrite">AllKind Corporation, Copyright &copy; 2018</p>
        <a href="credits.html" id="credits">Credits</a>
        <p id=disclaimer>By using this site, you agree to our <a href="privacy.html">Privacy Policy</a> and <a href="toc.html">Terms of Conditions</a>.</p>
        <p id="license">
            <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
                <img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" />
            </a>
            <br />This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
        </p>
    </div>
</footer>

出于某种原因，我的页脚在页脚中包含描述(<section id="description"> 的子项)。我已将问题缩小到与 float: right; 有关description2 的 CSS 标签.

这是描述和页脚的 CSS。

/* Description */
#description1 {
    text-align: center;
    font-size: 18px;
    float: left;
    padding-left: 100px;
    padding-top: 30px;
}

#description2 {
    text-align: center;
    font-size: 18px;
    float: right;
    padding-right: 100px;
    padding-top: 30px;
}

/* Footer */
footer {}

#copywrite {
    text-align: center;
    font-size: 13px;
}

#credits {
    font-size: 18px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: left;
}

#disclaimer {
    font-size: 15px;
    text-align: center;
    margin-top: -28px;
    margin-bottom: 0;
}

#license img {
    float: right;
    margin-top: -27px;
}

#license {
    font-size: 10px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: -2px;
}

Answer 1

您需要先清除 float 。您面临的问题是由于 float 元素造成的

 #description1 {
   text-align: center;
   font-size: 18px;
   float: left;
   padding-left: 100px;
   padding-top: 30px;
 }

 #description2 {
   text-align: center;
   font-size: 18px;
   float: right;
   padding-right: 100px;
   padding-top: 30px;
 }
/*This is to clear the float*/
 .clearfix {
   clear: both
 }

 /* Footer */

 footer {}

 #copywrite {
   text-align: center;
   font-size: 13px;
 }

 #credits {
   font-size: 18px;
   text-decoration: none;
   text-transform: uppercase;
   text-align: left;
 }

 #disclaimer {
   font-size: 15px;
   text-align: center;
   margin-top: -28px;
   margin-bottom: 0;
 }

 #license img {
   float: right;
   margin-top: -27px;
 }

 #license {
   font-size: 10px;
   text-align: center;
   margin-top: 10px;
   margin-bottom: -2px;
 }

<section id="description">
  <div id="description1">
    <div class="container">
      <h3><em>text</em></h3>
      <p>text</p>
    </div>
  </div>

  <div id="description2">
    <div class="container">
      <h3><em>text</em></h3>
      <p>text</p>
    </div>
  </div>
</section>
<div class="clearfix"></div><!--Clearing the float -->

<footer>
  <div class="container">
    <p id="copywrite">AllKind Corporation, Copyright &copy; 2018</p>
    <a href="credits.html" id="credits">Credits</a>
    <p id=disclaimer>By using this site, you agree to our <a href="privacy.html">Privacy Policy</a> and <a href="toc.html">Terms of Conditions</a>.</p>
    <p id="license">
      <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">
                <img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png"/>
                </a>
      <br />This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
    </p>
  </div>
</footer>

注意 clearfix 元素和 CSS 中的类

这是 jsfiddle 演示:http://jsfiddle.net/GCu2D/4533/