如何使页脚左右浮动？

Question

我希望文本在页脚的右侧，图像在左侧。 每当我有浮标时：在“页脚图片”的右边，背景色就会消失。

在添加浮点数之前：右： http : //i57.tinypic.com/2cp9mkj.png

添加浮点后：右： http : //i60.tinypic.com/206y1rr.png

的HTML：

<div class="events">
    <div class="row">
        <div class="col span-12">
            <footer>

                    <ul class="links">
                        <li class="links"><a href="index.html">Home</a></li>
                        <li class="links"><a href="vendors.html">Vendors</a></li>
                        <li class="links"><a href="events.html">Events</a></li>
                        <li class="links"><a href="location.html">Location</a></li>
                        <li class="links"><a href="volunteer.html">Volunteer</a></li>
                    </ul>       

                    <ul class="pictures">
                        <li class="pictures">
                            <a href="#">
                                <img src="images/insta.png" alt="instagram icon">
                            </a>
                        </li>
                        <li class="pictures">
                            <a href="#">
                                <img src="images/twit.png" alt="twitter icon">
                            </a>
                        </li>
                        <li class="pictures">
                            <a href="#">
                                <img src="images/face.png" alt="facebook icon">
                            </a>
                        </li>
                    </ul>
            </footer>
        </div>
    </div>

</div>

CSS：

 .row {
    margin: 0 auto;
    clear: both;
}

.col {
    box-sizing: border-box;
    float: left;
    width: 100%;
    margin: 0;
}

body {
    margin: 0px 0;
}

footer {
    background-color:#343434;
    width: 100%;
    margin-top: 20px;
    height: auto;
    font-family: 'billymedium';
    font-size: 23px;
    line-height: 23px;
}

footer a, a:visited {
    color: #b7b7b7;
    text-decoration: none;
}

footer a:hover {
    color: #5a8747;
}

footer img {
    max-width: 30px;
    padding-top: 10px;
    padding-bottom: 5px;
}

footer ul.links, ul.pictures {
    list-style: none;
    margin-top: 0;
    padding: 0; 
}

footer li:first-child {
    display: inline;
    margin-left: 0px;
}

footer li.links {
    display: inline;
    margin-left: 25px;
    float: left;
    padding-top: 15px;
}

footer li.pictures {
    display: inline;
    margin-right: 5px;
    text-align: right;
}

Answer 1

将此CSS添加到样式表应该可以解决此问题：

footer {
    overflow: hidden;
}

Answer 2

这是一个清除问题。 如果此站点使用的是框架，则可能制作了.clearfix或.clear类，但基本上它看起来像这样：

.clear {
  clear: both;
}

在结束之前，将其添加到“ col span-12” div中：

<div class="clear"></div>

如果您不想创建一个类，这也可以：

<div style="clear:both;"></div>