为什么wrap中要加float:left左浮动（源自：HTML+CSS基础课程 15-5）-原创手记-慕课网

一开始我一直在想玩什么wrap要加上float:left，不加会怎么样？然后尝试着不加float:left，结果发现如果不加就不会出现居中效果，会跟一开始一样文字在最左边。
   后来反复试验，终于有点理解为什么要加上float:left，不过我自己不太能表达出来，简单来说，我个人理解就是： 如果不加float:left，因为div class="wrap"是块状元素，所以是独占一行的，文字后面延伸到浏览器最右侧，导致这个div class="wrap"里面的元素（指div class="wrap-center"）也是延伸到浏览器最右侧的，假设div class="wrap"的宽度是100，那么div class="wrap-center"的宽度也是100，所以前面所说的，在wrap里面用left:50%往右移动50%，然后又在wrap-center里面用left:-50%，因为wrap和wrap-center宽度是相等的，导致它们抵消了，所以最后不会出现任何居中效果。     
    然而，如果在wrap里面加了float:left，意思就是左浮动，根据前面第12章里面所说的浮动模型的特征，wrap是不能独占一行的，wrap如果加了左浮动，然后里面又嵌套有其他元素的话(这里指wrap-center)，第一个重点来了：wrap将会在“我们来学习一下这种方法。”这句话之后把wrap-center放进去，也就是说“我们来学习一下这种方法。”这句话后面不会出现可以一直延伸到浏览器最右侧的空白，而是出现了wrap-center。而且第二个重点也来了：就是wrap-center的宽度会跟wrap的宽度保持一致(当然这里是指wrap-center里面没有指定width而是保持默认的情况下)。 
    此时，假设“我们来学习一下这种方法。”这段话的长度为10，那么wrap-center的长度就是10，此时再在wrap-center里面用left:-50%，就是往左移动-50%，大家脑补一下，这个时候就实现了把这段文字居中的效果。到现在我们可以看到，之前是根据wrap的长度100移动了50%，后来是根据wrap-center，其实就是“我们来学习一下这种方法。”这段文字的长度移动了-50%。        这就是原理。 
    不知道大家看懂没，我是尽力了。。。

源代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;

    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}

/*下面是代码任务区*/

.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
}
.wrap{
    float:left;
    background:red;
    position:relative;
    left:50%;
}

</style>
</head>

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
<br>
<!--下面是代码任务区-->
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>