閉合CSS浮動元素的技巧

這篇文章主要介紹“閉合CSS浮動元素的技巧”，在日常操作中，相信很多人在閉合CSS浮動元素的技巧問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”閉合CSS浮動元素的技巧”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

閉合CSS浮動元素(floats)技巧

按照CSS規范，CSS浮動元素(floats)會被移出文檔流，不會影響到塊狀盒子的布局而只會影響內聯盒子(通常是文本)的排列。因此當其高度超出包含容器時，一般父容器不會自動伸長以閉合CSS浮動元素。但是有時我們卻需要這種自動閉合行為，具體如何處理呢？

◆有一種做法就是在父容器內再插入一個額外的標簽，并令其清除浮動(clear)以撐大父容器。這種方法瀏覽器兼容性好，沒有什么問題，缺點就是需要額外的(而且通常是無語義的)標簽，所以我個人不大喜歡。

◆后來又有了一種新的方式，使用:after偽類動態的嵌入一個用于清除浮動的元素，這種方法和上一種原理一樣，不同的只是把這個額外的內容用CSS生成，但考慮到IE不支持:after不得不做了不少的hack。這種方法兼容性一般，但經過各種hack也可以應付不同瀏覽器了，同時又可以保證html比較干凈，所以用得還是比較多的。

◆再后來又有人發現將父容器的overflow設為除visible之外的值就可以在標準兼容瀏覽器中閉合CSS浮動元素，IE自然又是不支持的，所以這種方法和上一種方法一樣都對IE做了不同處理(具體就是觸發layout)，不同的就是overflow沒有:after偽類那么麻煩了，缺點也有，overflow可能會產生一些小沖突。

在使用overflow之前還有過一種使用float的方法，就是讓父容器也浮動，這利用到了CSS浮動元素的一個特性——CSS浮動元素會閉合CSS浮動元素。這種方式在IE/Win和標準兼容瀏覽器中都有較好的效果，但缺點也很明顯——父容器未必想浮動就浮動的了，畢竟浮動是一種比較特殊的行為，有時布局不允許其浮動也很正常。使用float雖然在IE和標準兼容瀏覽器中都能閉合CSS浮動元素，但原理卻是不同的，IE/Win中float觸發了layout因而閉合了浮動，而在標準兼容瀏覽器中，float其實和上一種方法中的overflow原理一樣，產生了一個“塊級格式化范圍”——這是CSS規范中提到的一種現象，它往往具有某種獨立性，特性之一就是會自動閉合內部的CSS浮動元素。

按照規范，以下類型的元素會產生一個塊級格式化范圍：

◆CSS浮動元素，left或者right皆可。

◆絕對定位的元素。

◆inline-block元素，不過這個gecko目前不支持。

◆table-cell類型元素，其實table,table-head-group,table-row什么的也都可以，還有inline-table(gecko不支持)也同樣，因為他們都會間接產生一個匿名的table-cell。

◆overflow取值非visible的元素。

所以，原來在標準兼容瀏覽器中我們也可以有這么多的方法閉合一個CSS浮動元素，而且只需要CSS，無需其他。順帶說一下以上除了overflow，其余都有一個附加效果就是自動收縮父容器寬度。

而對于IE/Win，它有一套自己的體系，就是layout，具有layout的元素會自動閉合CSS浮動元素，再來看看觸發layout的CSS屬性，會發現和上面的塊級格式化范圍有很多類似之處：

◆CSS浮動元素

◆絕對定位元素

◆display:inline-block

◆zoom

◆width/height

◆overflow/overflow-x/overflow-y[IE7新增]

◆max/min-width/height[IE7新增]

以上來看IE中閉合CSS浮動元素的方法也不少，自然也都有其局限性，要么有附帶效果，要么使用的是非標準屬性(無法通過驗證)。

還要提一點的是display:inline-block，這個屬性對IE而言本身沒什么用，實際效果只是給一個元素暗地添加了layout，但是標準兼容瀏覽器是認得這個屬性的，所以要不影響這些瀏覽器，需要將display設回默認。這里IE有一個bug，如果先定義了display:inline-block，然后再將display設回block(這兩個display要先后放在兩個CSS聲明中才有效果)，那么layout不會消失，同時也不會影響其他瀏覽器，所以目前來說，這也算一個不錯的觸發layout的方法：

.gainlayout{display:inline-block;}

.gainlayout{display:block;}

所以要跨瀏覽器閉合CSS浮動元素，可以選擇的方式還是很多的，如何搭配使用這些CSS屬性就要具體情況具體分析了，靈活應用條件注釋也很有必要，要是實在不行我們回過頭來還有clear可以用嘛。

到此，關于“閉合CSS浮動元素的技巧”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！