Question

我正在创建一个包含页脚的网站，左侧只是简单的文本。在最右边将是带有各种社交网站链接的图标。当我将图像向右浮动时，我无法将图标留在容器内。如何在不向页脚添加任何填充的情况下将图像保留在黄色区域内并离开绿色？

body {
    background-color: #17241d;
    margin: 0;
}

#mainWindow {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fffff6;
    height:100%;
}

.right {
    float:right;
}

footer, .footer {
    font-size: .8em;
  padding:10px;
}

<body>
<div id="mainWindow">
<p>Text here</p>
<div id="footer">
<footer> 
<span>Left Side</span>
    <img class="right" src="http://static.viewbook.com/images/social_icons/facebook_32.png" />
</footer>
</div>
</div>
</body>

Answer 1

尝试将overflow:auto添加到您的页脚：

footer, .footer {
    font-size: .8em;
    padding:10px;
    overflow:auto;
}

<强> jsFiddle example

Answer 2

您还可以为页脚设置行高：http://jsfiddle.net/Fd4Pc/3/

footer, .footer {
    font-size: .8em;
    padding:10px;
    line-height: 2em;
}

Answer 3

浮动元素将扩展父元素高度，以扩展为父元素添加浮点数：

footer, .footer {
    font-size: .8em;
    padding:10px;
    float:left;
}

Answer 4

这可以通过两种方式完成

将overflow: hidden添加到footer

或

明确div

<footer>

<!--your code goes here-->

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

为什么我的页脚中的图像不能留在容器内？

4 个答案: