html - CSS 基本 float 布局，页脚的 margin-top

Question

我正在尝试使用 CSS 进行基本布局。

标题
旁白-内容
页脚

我为页脚设置了一个 margin-top 属性，但我不确定为什么它不起作用。这是我到目前为止的简单代码:

 

<style>

header {
	width: 100%;
 	height: 100px;
	border: 1px solid black;
	margin-bottom: 10px;
}

aside {
	width: 100px;
	height: 200px;
	border: 1px solid green;
	float: left;
	margin-right:10px;
}

article {
    height: 200px;
    width: 200px;
    border: 1px solid red;
    float: left;
}

footer {
	clear: both;
	border: 1px solid blue;
	width: 100%;
	height: 100px;
	margin-top: 10px;
}

</style>

<header> &nbsp; </header>
<aside>&nbsp;</aside>    
<article>&nbsp;</article>    
<footer>&nbsp;</footer>

您可以在此处看到页脚没有边距: http://i.imgur.com/PeeTg6I.png

Answer 1

添加显示:内联 block ；在页脚中。

<style>

header {
    width: 100%;
    height: 100px;
    border: 1px solid black;
    margin-bottom: 10px;
}

aside {
    width: 100px;
    height: 200px;
    border: 1px solid green;
    float: left;
    margin-right:10px;
}

article {
    height: 200px;
    width: 200px;
    border: 1px solid red;
    float: left;
}

footer {
    clear: both;
    border: 1px solid blue;
    width: 100%;
    height: 100px;
    margin-top: 10px;
	display: inline-block;
}

</style>

<header>
    </header>

    <aside>
    </aside>

    <article>
    </article>

    <footer>
    </footer>