CSS可真是個(gè)好東西，有了它我們做的網(wǎng)頁(yè)就能漂漂亮亮的，因此幾乎每一個(gè)網(wǎng)站我們都使用了CSS，CSS這門技術(shù)對(duì)于很多人來(lái)講是非常簡(jiǎn)單的，因?yàn)樗鼛缀鯖](méi)有邏輯，只是一種描述性的語(yǔ)言。但任何簡(jiǎn)單的事情如果深入都不簡(jiǎn)單，就一個(gè)就算有好多年經(jīng)驗(yàn)的前端工程師估計(jì)也不敢說(shuō)自己完全掌握了CSS，而對(duì)于我而言也是如此，我自己很清楚還有很多CSS知識(shí)點(diǎn)不清楚，這需要不斷實(shí)踐和學(xué)習(xí)來(lái)提升的。

說(shuō)到CSS的浮動(dòng)，我覺(jué)得大家是經(jīng)常用到的，但實(shí)際上float只是在早起為了解決文字排版的問(wèn)題是誕生的，也就是說(shuō)它是為文字而生，而實(shí)際上我們現(xiàn)在很多開(kāi)發(fā)者習(xí)慣上用它來(lái)做布局，包括我自己也是一樣。這樣可并不是太好，但是因?yàn)榱?xí)慣了，卻不自覺(jué)地用上了。

首先我們來(lái)看一張圖片，上述就是浮動(dòng)造成的問(wèn)題，紅線框就是“多余”的東西，也是異常的所在。也就是因?yàn)楦?dòng)造成多余的東西出現(xiàn)了，結(jié)構(gòu)代碼如下（核心保留，其他的聲落了）：

<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了，但是結(jié)果卻出現(xiàn)了一些問(wèn)題了。那就是右邊的子float的地方被“撐大”了，原因就是左邊的已經(jīng)有了一定高度。我們接下來(lái)把所有代碼“提純”，就單純來(lái)探討這個(gè)結(jié)構(gòu)，重新新建一個(gè)html文檔，里面的代碼精簡(jiǎn)至這個(gè)骨架，也就沒(méi)有其他因素來(lái)影響，直接討論這個(gè)問(wèn)題。代碼如下：

<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>

通過(guò)這個(gè)“提純”的代碼段我們可以知道前面的問(wèn)題正是這部分所引起的，我們還記得在IE中有一個(gè)經(jīng)典的CSS問(wèn)題，就是A、B兩個(gè)元素，讓A浮動(dòng)，B不浮動(dòng)，按理說(shuō)我們要的是A和B無(wú)縫挨著，卻我們結(jié)果發(fā)現(xiàn)有個(gè)縫隙，解決之道就是讓B也浮動(dòng)。這里解決思路也按照這個(gè)，于是添加一小段CSS：

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

我們?cè)俅嗡⑿逻@個(gè)頁(yè)面就可以看到繼而不同的景象了，我們發(fā)現(xiàn)所呈現(xiàn)到我們眼前的是我們所希望看到的結(jié)果了。