CSS清楚浮動

浮動是乙個有意思（你也可以說它很麻煩）的css屬性，任何元素設定了浮動，層級就提高了，會影響它後面沒設定浮動的元素，這些倒霉的被影響者會跑到浮動層的下面去（當然ie6、ie7除外），**看起來是這樣：

因為設定了浮動的元素會提高層級，所以如果乙個平淡無奇的父級元素（沒有設定浮動或別的提高層級的屬性）居然包住了乙個浮動的傢伙，並且這個父級還沒有設定高，那它就悲催了，因為父級沒法包住它的子級浮動元素（當然ie6、ie7又除外）：

那怎麼樣才能讓父級包住浮動層呢？1. 在浮動層下，設定空div，**如下：

說明：

clear: both;可以讓元素不受到浮動層影響，排到浮動層的底下，

而父級可以包住最底下這個空div，這樣看起來，它似乎也就包住那個浮動層了，

其實是障眼法哈～

缺點：ie6下會多出1畫素來，並且設定了無語義的空div；

2. 在父級設定：overflow: hidden;

說明：overflow: hidden; 用它是為了提高父級的層級，層級提高了，自然能包住子級浮動元素了。

缺點：要是父級裡面有什麼元素居然飄到父級以外的地方，那就悲劇了，例如很多js的提示層效果，

就不能用 overflow: hidden;

3. 在父級設定：float

說明：父級包不住浮動層，因為層級不夠，那父級也設定float好嘍

缺點：父級如果也有父級，也要設定浮動，那用這種方法，一路浮動到body那兒才算完事兒～～呃。。此方法本身就很滑稽

4. 在父級設定：display: inline-block;

說明：inline-block; 是乙個不相容的屬性，但用在這裡只是為了提高父級層級，

如此一來，可以完全忽略它的不相容性哈～

缺點：設定不了元素居中：margin-left: auto; margin-right: auto;

你可以在不需要居中的元素上使用這方法哈～

5. 父級如果是絕對定位：position: absolute;

說明：要說層級，那絕對定位必定是老大，在絕對定位眼中，小小的浮動也居然敢稱層級？？

缺點：position: absolute;會影響布局，它是相對父級的塊元素為參照物進行定位，

完全不按文件流的方式走，呵呵，所以如果你要是在絕對定位的元素裡設定浮動，那就盡情設定吧，

不必理會任何浮動神馬的，因為在絕對定位下，浮動啥的，真的是浮雲了～

6. 給浮動層下設定：

7. 給父級加上這行吧：

.clear:after

說明：:after 是乙個很好用的屬性，有了它，可以往任何元素裡插入字串、空格啦，'.'之類的，

但可惜，ie6，ie7不認識:after，不過，又有什麼關係呢？

反正ie6\ie7的父級能包住浮動層，所以不必管它們嘍～

忘了解釋了，先給浮動層底下插入乙個空格（content: '\20';），再把這個空格轉成塊元素，並且清除浮動層的影響，讓父級包住這個空格，也是障眼法哈～