CSS布局技巧:在子項目浮動後父容器的閉合問題

來源:互聯網
上載者:User
最近兩個月斷斷續續做了好幾個網站的美工,做的過程中對DIV+Css的標準開發有了進一步的瞭解。有兩點收穫最大,一是徹底弄懂了CSS的盒子模式(Box Model),再一個就是搞定了困擾我很久的“閉合浮動元素”的問題:
  一般說來如果某個子項目使用了浮動(float),那父元素總是不能確切地知道子項目是在什麼位置結束的,所以父元素的下邊框總是從子項目的中間甚至是頂部穿過,看起來很不舒服。
  最早時我都是在子項目結束後單獨加個<br />或<div></div>將其屬性設定為“clear:all;”,但這樣一來就需要產生不少沒用的空標籤,甚至有些網站需要修改ASP代碼以自動添加這些空標籤,只能算是下策。
  後來發現當父標籤也設定為浮動(float)時就可以在正確的位置閉合了,所以就把父容易也浮動起來,這樣一來很多ASP代碼就不需要改了,遇到需要添加含Clear屬性的空標籤時如果不能從模板中添加,而需要從ASP代碼中添加時,就不需要改ASP代碼了,只需要把父容器設為浮動,如果還需要改ASP,那就再把父容器的父容器設為浮動,一層層地浮動上去,總能解決問題的。這雖然能省不少事,但很容易造成整個頁面中全是浮動元素,-_-!!! 也只能算是中策而已。
  再後來,在網上搜尋別的東西時偶然發現有人說只要在父容器的CSS屬性中加上以下兩個屬性就可以搞定了:

Example Source Code [www.52css.com]overflow: auto;
_height: 1%;

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

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。