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

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

首先我們來看一張圖片，上述就是浮動(dòng)造成的問題，紅線框就是“多余”的東西，也是異常的所在。也就是因?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)了一些問題了。那就是右邊的子float的地方被“撐大”了，原因就是左邊的已經(jīng)有了一定高度。我們接下來把所有代碼“提純”，就單純來探討這個(gè)結(jié)構(gòu)，重新新建一個(gè)html文檔，里面的代碼精簡(jiǎn)至這個(gè)骨架，也就沒有其他因素來影響，直接討論這個(gè)問題。代碼如下：

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

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

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

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