两个块元素设置display:table-cell时，分别两个元素设置不同的height，为什么会影响到另一个块元素的高度？
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
.girl{
height:500px;
background:red;
display:table-cell;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
<!--下面是代码任务区-->
<div class="girl">
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
如上：
.container｛height:300px;｝
.girl { height:500px;}
两个块元素是自动浮动还是两个块元素已经转为内联元素了，所以才会自动排列在同一行？
另外 .container height:300px 也自动变成与 .girl 的高度一样 500px 这是为什么呢？
