为什么当float的同级元素DIV使用padding-left：100px; 会使float向左移动100px？

Question

请告诉我原因，谢谢

<b style="float:right;font-size: 0.5rem">十二月</b>
<div style="overflow-x:auto;white-space:nowrap;width:100%;border:1px solid black;margin-top:2rem;padding-left:100px;height:2.8rem;">
</div>

Answer 1

你给这两个元素放到同一个div里就不会出现了
现在是因为给div加了padding-left后就相当于把这个div比原来撑大了100px,它的父级也是比原来大100px，而你的浮动是相对于原来的位置不变 所以感觉上是向左移动了100px
当你给div增加 box-sizing: border-box;属性之后就不会出现这种情况了
这里主要是盒模型差异性
一般盒子宽度是width + padding + border
加了上面代码就是 padding和border在width中包括了