Question

CSS z-index问题 和清除浮动影响的办法?

代码实现图一功能。问题1：13 15行清除浮动的代码适用于除ie外其他浏览器吗？overflow：hidden是用来在其他浏览器实现清除浮动？这里不需要再写一个overflow：hidden吗？第10行，为什么最外面的div盒子 不用清除浮动 就可以自动被撑大？问题2：这里的 li元素和 img元素在没设z-index的时候层级谁高？不是后来者居上吗，那img默认在上 那为什么还要在鼠标移上li的时候把 z-index设成1？额，越说越乱。。





Answer 1

CSS z-index问题 和清除浮动影响的办法?代码实现图一功能。
问题1：13 15行清除浮动的代码适用于除ie外其他浏览器吗？overflow：hidden是用来在其他浏览器实现清除浮动？这里不需要再写一个overflow：hidden吗？第10行，为什么最外面的div盒子 不用清除浮动 就可以自动被撑大？
overflow: hidden清除浮动适用于所有浏览器，清除浮动只是在它的子元素有浮动才要清除，本例只有li存在浮动，故只需要在它的父元素ul上清除浮动就可以。
问题2：这里的 li元素和 img元素在没设z-index的时候层级谁高？不是后来者居上吗，那img默认在上 那为什么还要在鼠标移上li的时候把 z-index设成1？额，越说越乱。。
后来居上针对同级元素说的，而img只是li的子元素。li设置成z-index: 1主要作用是让这个li高于其他li，以便它始终显示在其他li之上。

追问

问题1：13 15行只作用ie吗？我用的是360浏览器 这里 没有写overflow：hidden，也实现清除浮动的效果了啊。为了兼容所有浏览器浮动的影响 应该写哪几条？问题2：13行 #outer ul:after{content:".";display: block;height: 0;visibility: hidden;clear: both;} 这种方法 的意思可以讲一遍吗？ 看不懂。。问题3：这个li设置成 z-index：1 那其他li的默认层级是多少呢 0吗？

追答

问题1：其实你这里用了两次清除浮动，#outer ul:after这里已经清除一次浮动，#outer这里就不用再清除了问题2：13行 #outer ul:after{content:".";display: block;height: 0;visibility: hidden;clear: both;} 这种方法 的意思可以讲一遍吗？ 这里用到了一个伪元素，它实际表现是这个ul的最后一个子元素，它的代码是给:after伪元素清除浮动。conter:"."是这个伪元素生效必须的。问题3：这个li设置成 z-index：1 那其他li的默认层级是多少呢 0吗？其他默认无层级，所有正层级都在无层级心上，负层级都在无层级之下

假设父元素下的若干子元素存在浮动，两种清除浮动的方法:1、给父元素写上overflow: hidden;2、给子元素中最后一个元素写上clear: both; 对于第2个方法，可以再写一个div来达到这个效果，也可以通过父元素的:after伪元素来实现，因为这个伪元素就是ul的最后一个子元素。当然要让它生效，必须要通过content指定内容，可以是1个空格，也可以是1个点。我通常是用空格。

追问

这些一套套的规律 w3c上学的时候都没有看见 是大家项目中总结的规律吗。书上会有这些详细的东西吗 《css权威指南》《css禅意花园这些》？

追答

推荐你本书，里面会有你想要的。《Web前端开发精品课 HTML与CSS进阶教程》，某宝上有卖的

还有一本，css揭秘

w3c上的都是些规范，平时使用技巧都是大家总结出来的，w3c上是不会有的。