CSS可真是个好东西，有了它我们做的网页就能漂漂亮亮的，因此几乎每一个网站我们都使用了CSS，CSS这门技术对于很多人来讲是非常简单的，因为它几乎没有逻辑，只是一种描述性的语言。但任何简单的事情如果深入都不简单，就一个就算有好多年经验的前端工程师估计也不敢说自己完全掌握了CSS，而对于我而言也是如此，我自己很清楚还有很多CSS知识点不清楚，这需要不断实践和学习来提升的。

说到CSS的浮动，我觉得大家是经常用到的，但实际上float只是在早起为了解决文字排版的问题是诞生的，也就是说它是为文字而生，而实际上我们现在很多开发者习惯上用它来做布局，包括我自己也是一样。这样可并不是太好，但是因为习惯了，却不自觉地用上了。

首先我们来看一张图片，上述就是浮动造成的问题，红线框就是“多余”的东西，也是异常的所在。也就是因为浮动造成多余的东西出现了，结构代码如下（核心保留，其他的声落了）：

<style>
.cl { zoom: 1; }
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.main{margin: 18px 0 20px 220px;}
.main .side{float: left; margin-left: -220px; width: 200px;}
</style>
<div class="main cl">
   <div class="side">
      <!--html-->
   </div>
   <div class="mn">
     <!--html-->
     <div class="sub cl">
        <!--html-->
     </div>
  </div>
</div>

由以上代码我们可以看到，其中有两次float，也有两次clear了，但是结果却出现了一些问题了。那就是右边的子float的地方被“撑大”了，原因就是左边的已经有了一定高度。我们接下来把所有代码“提纯”，就单纯来探讨这个结构，重新新建一个html文档，里面的代码精简至这个骨架，也就没有其他因素来影响，直接讨论这个问题。代码如下：

<style>
.cl { zoom: 1; }
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
body{width: 1000px;margin: auto;}
.main{margin: 18px 0 20px 220px;}
.main .side{float: left; margin-left: -220px; width: 200px;height:300px; background-color: #f00;}
.main .sub{background:#eee;}
.main .sub li{float:left; width:25%; }
.main .sub li a{display: block; border: 1px #ccc solid; text-align: center; height: 30px; line-height: 30px;}
</style>
<div class="main cl">
      <div class="side">
      </div>
      <div class="mn">
         <div class="sub cl">
           <li><a href="">1</a></li>
           <li><a href="">2</a></li>
           <li><a href="">3</a></li>
           <li><a href="">4</a></li>
         </div>
      </div>
</div>

通过这个“提纯”的代码段我们可以知道前面的问题正是这部分所引起的，我们还记得在IE中有一个经典的CSS问题，就是A、B两个元素，让A浮动，B不浮动，按理说我们要的是A和B无缝挨着，却我们结果发现有个缝隙，解决之道就是让B也浮动。这里解决思路也按照这个，于是添加一小段CSS：

.main .mn{float: right; width: 100%;}

我们再次刷新这个页面就可以看到继而不同的景象了，我们发现所呈现到我们眼前的是我们所希望看到的结果了。