我预计div内的填充将保持清除任何文本。但是给出以下html / css，内容文本会溢出到填充中;
<div class="foo">helloworld</div>
.foo {
float: left;
overflow: hidden;
background: red;
padding-right: 10px;
width: 50px;
border: 1px solid green;
}
该文本的大小为50px，并以10px的宽度填充。是设计吗如果是这样，似乎很笨 – 如果填充内容，填充不是填充！还是我只是做错了？
问候，CSS新手。
解决方法
这是正确的行为。 overflow：hidden将剪辑外部扩展的内容。填充在盒子里面，所以如果需要，内容将会愉快地溢出到这个空间。
为了获得你似乎正在瞄准的效果，一个解决方案是将div.foo包装在另一个div中，然后设置背景，如下所示：
<div class="foowrapper">
<div class="foo">purrrrrrrrr</div>
</div>
.foo {
overflow: hidden;
width: 40px;
}
.foowrapper {
padding-right: 10px
background: red;
border: 1px solid green;
}
