浮箱上的高度问题

Question

我有这个HTML，我将浮动框放在中心位置：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

为什么容器高于盒子？

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

Answer 1

这真的是因为使用了float，如果你使用display：inline-block;而不是浮动：左;然后你不会得到那个空间：

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

demo