移动网站建设方案,手机wap在线浏览器,涟水建设局网站,wordpress新版编辑器开发1. 浮动的非本职工作
我们只要静下心来好好想想浮动的本质#xff0c;实现的原理#xff0c;就可以知道为什么浮动本不应该用来对页面进行布局。还记得上一部分所说的浮动的本质吗#xff1f;即“包裹与破坏”。我们可以用这个#xff08;“包裹与破坏”#xff09;解释为…1. 浮动的非本职工作
我们只要静下心来好好想想浮动的本质实现的原理就可以知道为什么浮动本不应该用来对页面进行布局。还记得上一部分所说的浮动的本质吗即“包裹与破坏”。我们可以用这个“包裹与破坏”解释为什么浮动可以让li这类block水平的元素水平排列
1.1 单个无浮动的li元素
HTML: 这里的li元素为什么会有高度如果您认真读过前半部分内容关于line boxes模型与高度的关系的内容应该知道由于图片没有应用float属性其本身有一个正常的inline box这个inline box高度等于图片的height在这行元素中图片这个inline box的高度最高于是传递给了line boxline box是个真正意义上的高度直接作用于containing box就是这里的li元素使li元素有一个高度。理解了这个您就会明白为什么要是这里的图片添加了float属性li高度会塌陷了浮动破坏了inline box
1.2 单个左浮动的li元素
HTML 通过添加浮动让li丧失高度现在的高度完全是由图片的自身高度撑起来的(包裹性)
浮动的“包裹性”让元素变成类似于inline box的元素而浮动的“破坏性”正是破坏inline box元素的这其中岂不有矛盾。其实非也对于block水平的这类块状元素需要先让其变成类似效果的内联元素然后再破坏之实乃先诱拐再奸杀的生动实例啊
1.3 多个左浮动的li元素
HTML: 因为浮动的破坏性导致添加浮动后的li元素的高度为0所以所有的li都是并排显示但是因为图片的真实存在所以并没有产生覆盖而是紧贴着显示
1.4 左浮动的li元素和无浮动的li元素
HTML: 因为添加浮动的li的高度为0所以假设这个li压根是不存在的从而后面的li直接无视前面的li元素宽度100%显示只是图片本身是实体的原因导致图片和图片之间无法重叠显示所以图片靠在一起
2. 证据
前文是着重分析了浮动的“本职工作”文字环绕显示本文着重分析了浮动的“非本职工作”列表布局两者都是用的同样的原理解释的那么有什么证据可以证明“页面布局”不是浮动的“本职工作”呢。答案关键字就是高度塌陷
HTML: 上图显示ul高度为0这是必然的正常的应该的。您要是在IE下看到ul有高度认为这是Firefox等浏览器有问题就错了您把ul的width属性去掉看看会发现IE下ul高度也为0 这是IE的layout作祟。至于为什么ul高度为0我前面很多地方都已经讲了不再说了。但是从中我们可以看到浮动本不是用来列表布局的而是用来使元素环绕显示的因为元素环绕例如文字其自身是含有inline boxes高度的这是inline水平的元素形成高度的基础所以虽然浮动元素没有高度但是其周围环绕的元素是有高度的只要环绕元素比浮动元素高度高父标签无高度的问题自然也就没有了也就形成了文字环绕的效果但是纯粹一堆浮动元素会有高度吗没有自然而然父元素高度就会塌陷。所以浮动元素塌陷的问题根本就不是浏览器的bug而是我们没有正确地深入地了解浮动是我们自己使用不当因为浮动本不应该用在这里的
3. 解决高度塌陷的问题 – 清除浮动
CSS中有个讨论较多的话题就是如何清除浮动清除浮动其实就一个目的就是解决高度塌陷的问题。为什么会高度塌陷什么时候会高度塌陷塌陷原因是元素含有浮动属性 – 破坏inline box – 破坏line box高度 – 没有高度 – 塌陷。什么时候会塌陷当标签里面的元素只有样子没有实际高度时会塌陷。所以呢并不是只要有浮动元素就会坍塌就要清除的CSS水平高低衡量的标准之一就是改用什么样式就用什么样式不多用也不少用
3.1 投机取巧法
就是直接一个放到当作最后一个子标签放到父标签那儿此方法屡试不爽兼容性强使用方便是初学时使用的上佳之选。但是我从来不用因为我看到的是个巨大的浪费浪费了一个标签而且只能使用一次我个人是无法容忍的所以这个方法不推荐。而且有时候一不留神中间多了个空格会产生一段空白高度的
3.2 overflow zoom方法 此方法优点在于代码简洁涵盖所有浏览器可谓不错的选择啊。不过也是有问题的就是这个overflow:hidden;是个小炸蛋要是里面的元素要是想来个margin负值定位或是负的绝对定位岂不是直接被裁掉了所以此方法是有不小的局限性的。我一般不用这个方法只是有时候顺便去除浮动时用用
3.3 after zoom方法
先来简单讲讲after所谓after就是指标签的最后一个子元素的后面。于是呢我们可以用CSS代码生成一个具有clear属性的元素其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点我了很多次貌似随便写什么东西都没有问题比如content:’clear both’;没问题或是content:’张鑫旭’也是ok的。于是有 这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了我都是用这个样式清除浮动的不会影响任何其他样式通用性强覆盖面广我很推荐哦
总结
1. 清除浮动的方法还是推荐使用’afterzoom’
2. 添加浮动后的图片的容器的高度因为浮动的破坏性其高度变成了0但是因为实体图片自身的高度所以后面的元素并不会覆盖它这也是浮动元素和绝对定位元素的最大区别
