在页面底部，我希望看到一个黄色的栏，并显示社交媒体链接和其他小细节。我希望链接在右侧，小细节在左侧。
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;
}
在写这篇文章的时候，我发现。三分之一对于CSS部分是不正确的，也许应该是footer a img {...}。
更新：否，即使我这样做^，它仍然摆脱了页脚的背景色。然后，我在页脚上添加了img样式的BG颜色，并且只在图标后面而不是整个页脚上进行了更改。
浮动元素时，会将其从当前文档流中删除。这意味着什么？好吧，就容器元素而言，那些浮动元素不会占用空间。如果container元素没有任何占用空间（高度）的内容，则容器的高度为0，并且没有背景色。即使浮动元素不占用空间，其他元素也会“看到”它们并在它们周围流动。
怎么修？清除浮子。最受欢迎的方法是使用clearfix。一个clearfix通常是一个CSS类。我使用Nicolas Gallagher的微型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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句