本来在学习PHP+Mysql的，但是看着干巴巴的页面，鶿决定美化一下。
无非是DIV+CSS，尽量少用表格。
但是写着写着CSS，突然就出鬼了。
页面很简单，一个大的main，将header，mainpost，filelist，footer包含其中。
html代码简洁如下：
PHP开发学习
xxx
CSS代码简洁如下：
#mainpost{
width: 600px;
float: left;
background-color: #333;
border:1px solid #FFF;
margin:0;
}
#filelist{
float: left;
width: 350px;
background-color: #333;
border:1px solid #FFF;
margin-left: 8px;
}
#footer{
width: 960px;
height: 100px;
clear: both;
background-color: #333;
margin: 10px auto 10px auto;
text-align: center;
}
#footer #footercopy
{
width: 300px;
height: 30px;
line-height: 30px;
background-color: #666;
padding: 0;
margin: 50px auto 0 auto;
}
如下图：
其实本来想把 “Copyright @ VicentMucid .” 这行通过margin往下沉的，但是 id=footercopy中的 margin-top:50px 的属性（即 margin:50px auto 0 auto)
失效了！
郁闷啊，俺没写错啊，Google了一番，原来是出现了 “margin折叠” 的问题。
至于 “margin折叠”，鶿只简单介绍下，以鶿上面的例子来说：
id=footer确实是父元素，而 id=footercopy 也确实是 id=footer的子元素，按照 “margin外撑，padding内撑” 的原则，“Copyright @ VicentMucid .” 这行信息应该距离父元素顶部50个像素，但是现在却失效了，和父元素重叠在了一起，这让鶿纠结了，果然css看似简单，确实很细致的活儿。
不过好在资料完全，以上的情况实际上就是 “嵌套元素的margin折叠问题”，主要是父元素没有设置boder或者没有设置padding的时候会出现的与子元素margin重叠的问题。
解决方法有2个，给父元素加一条border的css信息，或者加一条padding信息（两个都加也行），例如：
#footer{
width: 960px;
height: 100px;
clear: both;
background-color: #333;
margin: 10px auto 10px auto;
border:1px solid #FFF;
text-align: center;
}
添加之后效果如图：
但是细心的同志们会发现，footer块 内部的margin是搞定了，但是 整个footer块 却和上面的 mianpost块 “粘在一起了”。
这里就是 “margin折叠” 的另外一种情况了——相邻元素的 “marin折叠” 。
仔细看上面的css，会发现，id=filelist 这个块是float（浮动元素），而 id=footer 这个块不是浮动元素，所以不管你 id=footer 的 margin-top 有多大，我这里的margin-top为10px（即 margin: 10px auto 10px auto），也是没有用滴。
所以简单解决方法是——“要浮动就一起浮动”，即将footer也浮动起来，给id=footer添加一条 “ float:left”，css代码变成如下：
#footer{
width: 960px;
height: 100px;
clear: both;
float: left;
background-color: #333;
margin: 10px auto 10px auto;
border:1px solid #FFF;
text-align: center;
}
修改之后如图，现在效果基本完美：
当然也有解决办法二：
在 id=filelist 与 id=footer 添加一个额外的 div：
但是，鶿不推荐这么做——这种没有语义的div会让人发疯的。。 最后，如果你既懒得给 id=footer 加 “float: left;border:1px solid #FFF;” ，也不想添加无语义的
那么这里有一招搞定的办法：
就是给 id=footer 添加一条： display: inline-block;
但是昵，鶿不知道这样算不算标准做法，或者稳妥方法，传说中有浏览器不认识。
唉，“margin折叠” 算是鶿见过的最挫的W3C标准了-_-!!
博学多才啊。
想搞前端设计和后端了？
@freetstar , 嘛，人家不是一直都在搞么
@freetstar , free哥，昨天就发现你vps挂了的，咋还没搞好啊
@Mucid , 不清楚肿么回事，昨天晚上还能用了，我去看看
@freetstar , 现在好了
原来这东西叫做折叠啊，以前一直不晓得是什么情况。。。
@winio , 嗯，我以前也不知道的说
纯技术的不懂。楼主在什么地方气温24℃？
@Tao Zhu , 那天在下雨，所以很凉快的说
@雅岚 , 鶿给岚姐端来一杯葡萄糖
@Mucid ,
直接静脉注射好了。。。
@雅岚 , 难道要鶿给岚姐打针么
骂的~~还想研究下你博客的~~哎。。下次~~干活去了~你妹的
@kaka , 小伙子，天天忙神马
恩，不错
高前端的还真是牛呀
想支持博主了，再回去好好看看
啊哈哈，CSS+DIV是玩死你没商量的东西啊，最近我也在折腾这个东西折腾的想吐血。。。
@人好哇！ , 为了漂亮豁出去了
外边距叠加，呵呵~
@小松 , 为神马要整出这玩意儿昵。。
用了clearfix的方法麼，反正kita喜歡先reset一遍，然後再開始寫的說
@kita , 伪类不简洁
@婉秋 , 还有C++，JS什么的说
@Mucid ,
@婉秋 , HTML就不说了必须的，shell脚本可以勉强写一点，SQL查询也勉强使用
@Mucid ,
炫耀
css是需要调教的。
@Headpiggy , 调教，调教
我还没遇到过，不过有时候修复bug的时候，修复一个又遇到一个新的~
有时候，border\margin\padding\width\等这些布局的元素，尽量写了东西会比较少出问题，哪怕没东西写也给个none，或者写css Reset
@独自流浪 , 嗯嗯，下次不要忘记了
嘿嘿，这个标准在某些状况下还是蛮有用的呢。具体讲不清楚，等你习惯了就会发现滴 ~
@小邪 , 有用个球，搞的乱七八糟。。
@Mucid ,
木有鸭梨 ~
表示没遇到过……
@axiu , 修哥运气好
好久没搞前端了，解决方法有很多，这玩意儿就是纯粹的细心活，web rebuild也是细心活，w3c也是如此
；
@Angel , Angel哥的前端做的最棒了^_^
@Mucid , +1 Angel的前端确实很漂亮，我很喜欢，我博客现在使用的皮肤就是他弄的，不过是测试版，评论后不能自动刷新~，话说最近Angle很忙呀，有时间Mucid帮忙修复哈要得不
@Ansen , 呐，俺不懂GAE啊，Angel很NB的说