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

Question

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

.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减去浮动元素占的宽再居中..

为什么会这样?

Answer 1

1，content的宽度是1200px，之所以看起来只有700px，是因为被浮动元素覆盖掉啦
2，p设置了float之后，脱离文档流，但是对于文本和行内元素来说依然是占用空间的，所以设置text-align:center;之后文本会减去浮动元素再居中。

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it(文本和行内元素会环绕在浮动元素周围).

Answer 2

就是这样的，图文混排时，图片 float: left，文字内容是会被挤开的，而 p 元素却是在图片下面

Answer 3

position:absolute的时候脱离文档流。

Answer 4

我怎么记得float是在文档流里浮动？