为什么我的页脚页边不显示？ [CSS]

-1

这是一个相当基本的HTML/CSS问题，我很抱歉我不得不在这里问这个问题（我搜索了我最好的！）。我写了下面的HTML和CSS代码，虽然标题部分与文章和旁边的部分相距20像素，但页脚仅分隔10像素。实际上，无论我为页脚设定的边距如何，分离都是10px。我究竟做错了什么？为什么我的页脚页边不显示？ [CSS]

如果您可以在浏览器中测试此代码以了解我的意思，那将会很棒。我还在文章/旁边部分和页脚部分之间的倾斜边缘插入了一张图片链接。

http://cl.ly/image/3M2u1L0x2C0x

HTML代码

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Grey Boxes</title> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
</head> 

<body> 
<div id="wrapper"> 
    <header></header> 
    <article></article> 
    <aside></aside> 
    <footer></footer> 
</div> 
</body> 
</html>

CSS代码

#wrapper { 
    margin: auto; 
    width: 940px; 
    } 

body { 
    background-color: #fafafa; 
    } 

header { 
    height: 120px; 
    width: 920px; 
    display: block; 
    margin: 10px 10px; 
    position: relative; 
    background-color: #c6c6c6; 
    } 

article { 
    height: 740px; 
    width: 600px; 
    margin: 10px 10px; 
    float: left; 
    position: relative; 
    background-color: #c6c6c6; 
    } 

/* Keep scrolling! */ 

aside { 
    height: 740px; 
    width: 300px; 
    margin: 10px 10px; 
    float: right; 
    position: relative; 
    background-color: #c6c6c6; 
    } 

footer { 
    height: 120px; 
    width: 920px; 
    display: block; 
    margin: 10px 10px; /* Why is this being ignored? */ 
    background-color: #c6c6c6; 
    position: relative; 
    clear: both; 
    }

任何帮助将不胜感激！如果我没有遵循所有社区准则，我很抱歉 - 这是我第一次在StackOverflow上发布，我很快就会选择！谢谢！ :)

来源

2013-04-21 Athyuttam Eleti

您需要清除浮动之前你到页脚。改变你的HTML到这将工作：

<div id="wrapper"> 
    <header></header> 
    <article></article> 
    <aside></aside> 
    <div style="clear:both;"></div> 
    <footer></footer> 
</div>

来源

2013-04-21 15:46:03 greg84

非常感谢你！它确实有效，但我有点犹豫，因为我们添加了一个HTML元素来解决外观问题。这不是CSS的工作吗？这是一篇很好的解释性文章，尝试使用overflow来处理它：隐藏的CSS属性（除了其他一些方法外）：http://bit.ly/YcXFNG;但是我无法将其应用于我的文档。你可以研究一下吗？我刚开始使用CSS，我非常感谢你的帮助！非常感谢你的耐心！ :) – 2013-04-22 17:44:46

感谢您指引我在正确的方向！我做了一些研究，并最终找到了这些文章，解释了3种不同的方式来实现这个目标（一个是你建议的，另外两个是使用CSS）。 1. CSS Floats 101：http://alistapart.com/article/css-floats-101 2.使用CSS清除浮动块：http://www.positioniseverything.net/easyclearing.html 3.清除浮动块溢出：自动或溢出：隐藏：http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html – 2013-04-22 19:01:21

元素纯粹用于此目的是很常见的。请随时通过点击“打勾”来接受我的答案:) – greg84 2013-04-23 13:14:31

为什么我的页脚页边不显示？ [CSS]

回答

相关问题