html - float 框的高度问题

Question

我有这个 HTML，我将 float 框居中:

    #container {
        text-align: center;
        background-color:#e0e0e0;
    }

    #box {
        float:left;
        background-color:#000000;
        color:#fff;
    }

    <div id="container">
    	<div style="display: inline-block;">
    		<div id="box">
    			Test
    		</div>
    	</div>
    </div>

为什么容器比盒子高？

查看这个 JSFiddle: http://jsfiddle.net/dennismadsen/hhoza5r4/

Answer 1

这确实是因为使用了 float，如果你使用 display:inline-block;而不是 float :左；那么你将得不到那个空间:

#box {
    display:inline-block;
    /* float: left; */
    background-color:#000000;
    color:#fff;
}

demo