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等于百分之百

好这样就没问题了

这时候我们再试一下来回切换边框

大家看问题就解决了

最后更新于