样式<hr />未按预期显示

Question

http://jsfiddle.net/kWJ79/17/

1. 为什么<hr>这么短？
2. 为什么#wrapper底部的间隙大于指定的20px填充尺寸？

Answer 1

1. 您的<div id="vr">的父<hr>设置为宽度1px（浮动：左），因此<hr>为1px宽

2. #wrapper有额外的空间，因为#wrapper:after伪类在包装器末尾添加display:block和content:"."给它额外的一行在底部，它不是额外的填充

可能会将#wrapper {overflow:hidden;}视为使用:after伪类

的替代方法

http://jsfiddle.net/pxfunc/kWJ79/24/

Answer 2

hr对我来说似乎并不缺乏。您使用的浏览器是什么？

padding上似乎#wrapper的原因是因为您的内容（wrapper::after）正由浏览器呈现，因此它包含在包装内的高度格。

编辑：看过hr，出于某种原因，我在检查Chrome中的代码时错过了它。如前所述，包含div仅为1px。

Answer 3

#vr设置为height: 100%，因此需要它的父级#wrapper的完整高度。其中只包含浮动的子项，并且没有指定高度。您可以将#vr的高度指定为height: 554px;，它会排成一行。或者您可以在#wrapper上指定高度，但这需要其他模式。