浮动布局在页面缩小时的布局变形问题，原因，及一种解决办法

问题描述：

浮动布局在页面缩小时，布局变形，最后一个子元素被挤到下一排。效果如下↓

效果展示：

问题出现的条件：

1.宽度采用px固定值；
2.子元素宽度相加，正好等于父元素宽度；
3.有左右边框

问题出现的原因：

你css里边框写的是1px，页面缩放到50%，就是0.5px，小于屏幕最小能显示的1px，是无法显示的；
这个时候你的谷歌浏览器，就会把你写的1px变为2px，缩小一倍正好是原来的1px。
但是这个时候，在css里，子元素多了1px，原来严丝合缝的布局被打破了，最后一个子元素就被挤下去了。css像素和屏幕像素的关系点这里

一种解决方法：

使用ie盒子模型box-sizing: border-box;会把边框算进width里（width=content+padding+border）
有时候width在放缩时也变化，没有边框布局也会变形，可以用百分比表示子元素宽度。

更深的探索

1px的边框在屏幕放缩80%时，1px开始变大。（为何是80%的原因是我使用的笔记本电脑，屏幕较小，系统为防止字体过小，系统默认屏幕缩放为125%。而80%*125%=100%，所以我们将浏览器缩放为80%时，css里的1px才真的对应一个屏幕像素），所以chorme是在边框低于1屏幕像素时，会将css像素改大，使边框最小只能是1屏幕像素；

屏幕放缩倍数	css像素	两者之积（屏幕像素）
100%	1px	1px
90%	1px	0.9px
80%	1px	0.8px
75%	1.067px	0.80025px
67%	1.2px	0.804px
50%	1.6px	0.8px
33%	2.4px	0.792px
25%	3.2px	0.8px

谷歌浏览器放大css像素的目的是为了将其屏幕像素保持在0.8px左右（电脑默认缩放125%的情况下）；如果你是台式机，电脑默认缩放100%，就会是保持在1px。
猜测谷歌浏览器认为小于1屏幕像素的元素无法显示。
而边框虽然细小，但却是非常重要的页面组成部分，所以在屏幕像素小于1屏幕像素时，谷歌就采用放大css像素的策略。

那么内边距padding有这样的性质吗
测试结果是不会，只有边框有这样的性质

能否给边框宽设置为百分比来解决问题？
答案是不能，理由如下↓

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。