关于float和text-align中的问题；

<div class='wrap'>
        <div class="left"></div>
        <div class="right"></div>
        <div class="content">xxxxxxxxxxxxx</div>
    </div>

.wrap{
        width:1200px;
        margin:0 auto;
    }
    .left{float:left;width:200px;}
    .right{float:right;width:300px;}
    .left,.right{height:200px;background:red;}
    .content{height:200px; text-align:center;}

当有float元素的时候，它是脱离的文档流的不占据空间了，所以content才会上来，其中的内容居中，我认为是在1200px居中, 但现实并不是这样，而是1200减去浮动元素占的宽再居中..

为什么会这样?