<html>
<head>
<style>
#header{
width:960px//通过id来控制
height:200px
}
@content{
width:960px//通过id来控制
height:auto //内容区域的高度一般都是auto的
}
#footer{
width:960px//通过id来控制
height:200px
}
</style>
</head>
<body>
<div id='header'>
<p>我是头部区域</p>
</div>
<div id='content'>
<p>我是内容区域</p>
</div>
<div id='footer'>
<p>我是低部区域</p>
</div>
</body>
</html>
用简单的CSS实现将FOOTER固定在页面底部,我们通常布局的时候都是头部，内容区域，还有底部，一般都是使用三个div，然后id分别设置为header，content，footer，然后在定义每个div的高度，一般来说，header，footer都是公共的，因为高度，内容一般都是固定的，底部的区域，举个例子：<html>
<head>
<style>
#header{
width:960px//通过id来控制
height:200px
}
@content{
width:960px//通过id来控制
height:auto //内容区域的高度一般都是auto的
}
#footer{
width:960px//通过id来控制
height:200px
}
</style>
</head>
<body>
<div id='header'>
<p>我是头部区域</p>
</div>
<div id='content'>
<p>我是内容区域</p>
</div>
<div id='footer'>
<p>我是低部区域</p>
</div>
</body>
</html>
给footer清除浮动，是为了清除它前面的浮动元素所造成的后续影响，否则的话，它就可能会“钻”到浮动元素的下面去，被浮动元素遮挡住。
而给浮动元素清除浮动那就没啥意义了，清除了那它还能叫浮动元素吗？
多嘴再说一句：浮动元素相当于漂浮在半空中的物体，“地面”上是不保留它的位置的，这样的话后面其他的非浮动的块级元素就可能会占用它本来在“地面”上的位置，这样就会造成“地面”上的物体被“半空”中的物体遮盖住的情况。而给浮动元素后面紧接着的一个非浮动块级元素添加清除浮动属性，就相当于把浮动元素在“地面”上的位置给保留下来，这样后面的元素就不会占用它的位置，这样就能避免被遮盖的情况发生了。
再啰嗦一句：只有非浮动的块级元素会“钻”到浮动元素的下面去，而行内元素却会自动避开浮动元素进行环绕排列，这就是“浮动”相比“定位”的神奇之处，也是很多初学者很难想明白的事情。
