- 相關(guān)推薦
徹底弄懂閉合浮動(dòng)元素CSS教程
一般說(shuō)來(lái)如果某個(gè)子元素使用了浮動(dòng)(float)，那父元素總是不能確切地知道子元素是在什么位置結(jié)束的，所以父元素的下邊框總是從子元素的中間甚至是頂部穿過(guò)，看起來(lái)很不舒服。
最近兩個(gè)月斷斷續(xù)續(xù)做了好幾個(gè)網(wǎng)站的美工，做的過(guò)程中對(duì)DIV Css的標(biāo)準(zhǔn)開發(fā)有了進(jìn)一步的了解。有兩點(diǎn)收獲最大，一是徹底弄懂了CSS的盒子模式(Box Model)，再一個(gè)就是搞定了困擾我很久的“閉合浮動(dòng)元素”的問(wèn)題：
一般說(shuō)來(lái)如果某個(gè)子元素使用了浮動(dòng)(float)，那父元素總是不能確切地知道子元素是在什么位置結(jié)束的，所以父元素的下邊框總是從子元素的中間甚至是頂部穿過(guò)，看起來(lái)很不舒服。
最早時(shí)我都是在子元素結(jié)束后單獨(dú)加個(gè)
或
將其屬性設(shè)置為“clear:all;”，但這樣一來(lái)就需要生成不少?zèng)]用的空標(biāo)簽，甚至有些網(wǎng)站需要修改ASP代碼以自動(dòng)添加這些空標(biāo)簽，只能算是下策。
后來(lái)發(fā)現(xiàn)當(dāng)父標(biāo)簽也設(shè)置為浮動(dòng)(float)時(shí)就可以在正確的位置閉合了，所以就把父容易也浮動(dòng)起來(lái)，這樣一來(lái)很多ASP代碼就不需要改了，遇到需要添加含Clear屬性的空標(biāo)簽時(shí)如果不能從模板中添加，而需要從ASP代碼中添加時(shí)，就不需要改ASP代碼了，只需要把父容器設(shè)為浮動(dòng)，如果還需要改ASP，那就再把父容器的父容器設(shè)為浮動(dòng)，一層層地浮動(dòng)上去，總能解決問(wèn)題的。這雖然能省不少事，但很容易造成整個(gè)頁(yè)面中全是浮動(dòng)元素，-_-!!!也只能算是中策而已。
再后來(lái)，在網(wǎng)上搜索別的東西時(shí)偶然發(fā)現(xiàn)有人說(shuō)只要在父容器的CSS屬性中加上以下兩個(gè)屬性就可以搞定了：
overflow: auto;
_height: 1%;
試了一下，果然好用，這么一來(lái)，這在目前應(yīng)該算是解決這一問(wèn)題的上策了：不需要對(duì)頁(yè)面做任務(wù)修改，也基本上不需要對(duì)父容器－－甚至是父容器的父容器做什么改動(dòng)，只給父容器添加兩個(gè)無(wú)所謂的屬性就搞定了。
【徹底弄懂閉合浮動(dòng)元素CSS教程】相關(guān)文章：
CSS閉合浮動(dòng)元素教程06-26
css屬性定位教程07-23
CSS入門教程01-25
CSS選擇器教程06-05
CSS教程之盒模型10-17
關(guān)于CSS教程:復(fù)合型條狀圖表01-25
CSS基礎(chǔ)教程之背景圖片07-31
CSS-層疊樣式表基礎(chǔ)教程08-10