float超高导致神奇的错行问题
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
大家好啊
这是一个小伙伴发来的神奇的demo
这不是有个边框吗
然后呢我把边框去掉大家看哎
里边就串行了
我再打开
大家看
那通常碰到这种问题
我们肯定会想到
应该是边框的宽度
挤压了他内部的空间导致的哈
但是他这个正好反了
他是有边框的时候
没问题
没边框的时候他折行了
所以这就很神奇
那具体排查这个问题的过程
我就不给大家演示了哈
其实就是删代码的方法
我们先来看一下这个demo
这是上下两个两层的容器
就是wrapper1和wrapper2
然后每一个wrapper里边都有一个子容器
这个子容器就是 float
等于 left
同时呢我会给外层容器设置一个高度
因为我们都知道哈
如果内层容器设置成了 float
那么他就不会自动撑开外层的容器
所以
我们一定要给外层容器设置一个大小
否则他就塌陷了
现在他两个高度都是30哈
没有任何问题
但是如果我把内层容器超高
比如说内层容器改成40
大家看
他超高了没问题
那他超高的同时
在绘制第二个float（的容器）的时候
就会基于他的这个边缘继续画
就会产生这样错位的现象
但是呢大家看
我把第二行的这个容器也加一个border
他不是超高10px吗
那我border边框宽度也是10
大家看哎这就没问题了
小于10都不行大家看 9
这样都不行
一定要大于10他才会正常
所以再回到这个问题
大家看我把边框去掉
加上我们可以推断他一定
有个东西超高了
我们来看一下这个东西
在这里
这也是一个福禄特的
他看他最外层的这个条是40像素
但是呢里边这个是41.36就说他超了
我们把它最外层这个
先把他的背景颜色
加深一点看一下
这些吧
好然后呢我们再把内层的这个
加一个背景颜色
blue吧
我放大一点大家仔细看
是不是超了
那如果我把下边这个
border去掉
大家看
我再加上
那他超了多少呢？超了1点几像素
所以呢我们边框设置1像素
他都不行
他还是会错位
大家看一定要大于他那个超的高度
比如说2就没问题
这就正常了
那知道了这个原因
解决这个问题就很容易了
我刷新一下
首先呢我们先把这个边框去掉
啊这就有问题了对吧
然后呢我们把这个float
找到刚才那个超的那个容器
这个
我们给它加一个height等于百分之百
好这样就没问题了
这时候我们再试一下来回切换边框
大家看问题就解决了