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

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

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

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

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

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