css学习笔记 9

1. 两列定宽和两列宽度自适应结构：
   1. 在ie7及以下，container的宽度和两列子元素的宽度设置为具体值或百分比的任意组合时，两列子元素即使浮动，container的高度也能自适应；其他浏览器需要为container清除浮动。
   2. 在ie7及以下，container的宽度设置为默认值auto时，container高度不能自适应，此时footer的位置会上移；两列宽度固定或自适应且和等于container的宽度时，假设footer宽度为auto，footer会出现在短的那一列的下方，如果短的一列在右边，那么footer的左边界与高的一列的右边界重合，如果短的一列在左边，那么footer的右边界与高的一列的左边界重合；两列宽度固定或自适应且和小于container的宽度时，如果两列分别左右浮动，那么footer就出现在两列间的缝隙中，宽度就是缝隙的宽度，如果两列仅向一边浮动，那么footer就出现在两列的另一侧，宽度为container宽度与两列宽度之差。
   3. 在第2点的基础上，假设设置了footer的宽度，它的边界计算规则不变，但是如果它的宽度超出了第2点所说的位置的宽度，那么就会下移。
   4. 解决第2/3点的办法是给footer清浮动，这样它就总是在两列之下了；对于其他浏览器仅为container清除浮动即可，同时设置并不会互相影响。
   5. 总结：非标准浏览器不支持伪类，因此清除不了container的浮动，只能用clear清除footer的浮动；标准浏览器只需要用:after来清除container的浮动，为了兼容，两个清除都要有。
2. 两列等高：
   1. 背景模拟：为container添加背景图像，这种方法只能应用于两列定宽的情况，而且如果两列的位置发生变换，背景图也需更改。
   2. 负边距：为两列都设置margin-bottom:-9999px;padding-bottom:9999px; padding-bottom让列的背景色在垂直方向上“无限”延伸，但这样也会撑开容器，因此用负的margin-bottom将footer拉回到原来的位置；最后别忘了，要让container的overflow:hidden来隐藏掉由于padding-bottom撑开的高度。
   3. 用js脚本实现