Question

在页面底部，我想要一个黄色的条形图，并有社交媒体链接和其他小细节。我希望链接位于右侧，小细节位于左侧。

HTML：

<footer>
  <div class="one-third"></div>
  <div class="one-third"></div>
  <div class="one-third">
    <a href="#"><img src="images/facebook.svg" /></a>
  </div>
</footer>

CSS：

footer {
    width: 100%;
    background-color: #f5c300;
}

.one-third {
    float:right;
}

在我写这篇文章时，我认为.one-third对于CSS部分是不正确的，也许它应该是footer a img {...}。

更新：没有，即使我这样做了^它仍然摆脱了页脚的背景颜色。然后我在页脚上用一种img风格抛出一种BG颜色，它只在图标后面改变，而不是整个页脚。

Answer 1

浮动元素时，将其从当前文档流中取出。那是什么意思？那么，就容器元素而言，那些浮动的元素不会占用空间。如果容器元素没有占用空间（高度）的任何内容，则容器的高度为0且没有背景颜色。即使浮动的元素不占用空间，其他元素也会＆＃34;看到＆＃34; 它们并围绕它们流动。

如何解决？清除浮子。最流行的方法是使用 clearfix 。 clearfix通常是CSS类。我使用Nicolas Gallagher的micro clearfix。

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

<footer class="cf"><!-- floated elements --></footer>

另一个clearfix解决方案是将overflow: hidden;应用于包含浮动元素的元素。这有一些缺点，因为有时你不想隐藏溢出父母的内容。

footer {
    width: 100%;
    background-color: #f5c300;
    overflow: hidden;
}

Answer 2

您好，请检查plunker https://plnkr.co/edit/Zmp66hXeiYAhS3VUyl8E?p=preview

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
   <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
   <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Basic plunk!</h1>

    <!-- Put your html here! -->
   <div class="footer">
                    <div class="pull-right">
                       <ul class="list-icons">
                                <li>
                                   <a href="">
                                      <em class="fa fa-twitter-square"></em>
                                   </a>
                                </li>
                                <li>
                                   <a href="">
                                      <em class="fa fa-facebook-square"></em>
                                   </a>
                                </li>
                                <li>
                                   <a href="">
                                      <em class="fa fa-google-plus-square"></em>
                                   </a>
                                </li>
                                <li>
                                   <a href="">
                                      <em class="fa fa-instagram"></em>
                                   </a>
                                </li>
                                <li>
                                   <a href="">
                                      <em class="fa fa-flickr"></em>
                                   </a>
                                </li>
                                <li>
                                   <a href="">
                                      <em class="fa fa-pinterest-square"></em>
                                   </a>
                                </li>
                             </ul>
                    </div>
                    <div>
                        <strong>Copyright</strong> Example  
                    </div>
                </div>
  </body>

</html>

和CSS

/ *将你的CSS放在这里* /

h1 {
  color: red;
}
.footer {
    background: none repeat scroll 0 0 yellow;
    border-top: 1px solid #e7eaec;
    bottom: 0;
    left: 0;
    padding: 10px 20px;
    position: absolute;
    right: 0;
}
ul
{
  list-style:none
}
ul li
{
  float:left;
  padding-right:20px;
}

为什么，当我向右浮动时，背景颜色消失了？

2 个答案: