CSS清除浮動

標籤：style   blog   class   code   java   c   

1. 空div

1  .clear{height:0;clear:both;overflow:hidden;}

    就是直接一個<div class="clear"></div>(當然標籤也可以是br、p，class名稱也可以自由定義)當作最後一個子標籤放到父標籤那兒，此方法屢試不爽，相容性強，使用方便，是初學時使用的上佳之選。但是同時也看到了巨大的浪費，浪費了一個標籤，而且只能使用一次，我個人是無法容忍的，所以這個方法不推薦。而且有時候一不留神中間多了個空格會產生一段空白高度的。 

2. overflow + zoom方法

1 .box{overflow:hidden; zoom:1;}

     為父標籤box添加這兩個屬性。overflow是針對現在瀏覽器（包括ie7），而zoom主要是針對ie6設定的，如果父元素box定義了width值，那麼在ie6中就會自動觸發haslayout，也就不需要添加zoom屬性了。

    此方法優點在於代碼簡潔，涵蓋所有瀏覽器，可謂不錯的選擇啊。不過也是有問題的，就是這個      overflow:hidden;是個小炸彈，要是裡面的元素要是想來個margin負值定位或是負的絕對位置，豈不是直接被裁掉了，所以此方法是有不小的局限性的。我一般不用這個方法，只是有時候順便去除浮動時用用。

 

3. after+ zoom方法

1 .clearfix{zoom:1;}2 3 .clearfix:after{display:block; content:‘.‘; clear:both; line-height:0; visibility:hidden;}

    先來簡單講講after，所謂after，就是指標籤的最後一個子項目的後面，他適用於除了ie6/ie7之外的現代瀏覽器。於是呢，我們可以用CSS代碼產生一個具有clear屬性的元素，其中的關鍵樣式就是content了。或許您從網上看到的content裡面的內容是”.”一個點，我了很多次，貌似隨便寫什麼東西都沒有問題，比如content:‘clearboth‘;沒問題，或是content:‘佰億‘也是ok的。這裡的line-height:0寫成height:0也是可以的。此方法可以說是綜合起來最好的方法了，不會影響任何其他樣式，通用性強，覆蓋面廣，值得推薦。