徹底弄懂閉合浮動元素CSS教程

　　一般說來如果某個子元素使用了浮動(float)，那父元素總是不能確切地知道子元素是在什么位置結束的，所以父元素的下邊框總是從子元素的中間甚至是頂部穿過，看起來很不舒服。

　　最近兩個月斷斷續(xù)續(xù)做了好幾個網站的美工，做的過程中對DIV Css的標準開發(fā)有了進一步的了解。有兩點收獲最大，一是徹底弄懂了CSS的盒子模式(Box Model)，再一個就是搞定了困擾我很久的“閉合浮動元素”的問題：

　　一般說來如果某個子元素使用了浮動(float)，那父元素總是不能確切地知道子元素是在什么位置結束的，所以父元素的下邊框總是從子元素的中間甚至是頂部穿過，看起來很不舒服。

　　最早時我都是在子元素結束后單獨加個

　　或

　　將其屬性設置為“clear:all;”，但這樣一來就需要生成不少沒用的空標簽，甚至有些網站需要修改ASP代碼以自動添加這些空標簽，只能算是下策。

　　后來發(fā)現(xiàn)當父標簽也設置為浮動(float)時就可以在正確的位置閉合了，所以就把父容易也浮動起來，這樣一來很多ASP代碼就不需要改了，遇到需要添加含Clear屬性的空標簽時如果不能從模板中添加，而需要從ASP代碼中添加時，就不需要改ASP代碼了，只需要把父容器設為浮動，如果還需要改ASP，那就再把父容器的父容器設為浮動，一層層地浮動上去，總能解決問題的。這雖然能省不少事，但很容易造成整個頁面中全是浮動元素，-_-!!!也只能算是中策而已。

　　再后來，在網上搜索別的東西時偶然發(fā)現(xiàn)有人說只要在父容器的CSS屬性中加上以下兩個屬性就可以搞定了：

　　overflow: auto;

　　_height: 1%;

　　試了一下，果然好用，這么一來，這在目前應該算是解決這一問題的上策了：不需要對頁面做任務修改，也基本上不需要對父容器－－甚至是父容器的父容器做什么改動，只給父容器添加兩個無所謂的屬性就搞定了。

【徹底弄懂閉合浮動元素CSS教程】相關文章：

css教程07-22

css經典教程07-18

（優(yōu)）css教程07-21

（必備）css教程07-25

【熱】css教程07-24

css經典教程(優(yōu))07-26

css經典教程[集合]07-30

css教程13篇[必備]07-20

css教程精品(13篇)07-23

css經典教程優(yōu)秀（13篇）07-27