为什么顶部和底部填充出现在浮动元素中？

Question

一个疑问：

我为 div 赋予 float:left 并在 div 中放置另一个块元素，例如 h3。然后它给出填充顶部和底部。如果我删除 float: left 它不会提供填充。

html

<div class="one"><h3>Test with Float</h3></div>
<div class="clear">&nbsp;</div>
<div class="two"><h3>Test without Float</h3></div>

css

.one{
    background: grey;
    float:left;
    width: 100%;
}
.two{
    background: #DAD5C1;
      width: 100%;
}
.clear{
    clear: both;
}

http://jsfiddle.net/7yh3kuea/

Answer 1

它不是填充，而是在非浮动元素中被忽略的边距。

更多信息是here。