最近兩個月斷斷續續做了好幾個**的美工，做的過程中對div+css的標準開發有了進一步的了解。有兩點收穫最大，一是徹底弄懂了css的盒子模式(box model)，再乙個就是搞定了困擾我很久的「閉合浮動元素」的問題：
一般說來如果某個子元素使用了浮動(float)，那父元素總是不能確切地知道子元素是在什麼位置結束的，所以父元素的下邊框總是從子元素的中間甚至是頂部穿過，看起來很不舒服。
最早時我都是在子元素結束後單獨加個
或將其屬性設定為「clear:all;」，但這樣一來就需要生成不少沒用的空標籤，甚至有些**需要修改asp**以自動新增這些空標籤，只能算是下策。
後來發現當父標籤也設定為浮動(float)時就可以在正確的位置閉合了，所以就把父容易也浮動起來，這樣一來很多asp**就不需要改了，遇到需要新增含clear屬性的空標籤時如果不能從模板中新增，而需要從asp**中新增時，就不需要改asp**了，只需要把父容器設為浮動，如果還需要改asp，那就再把父容器的父容器設為浮動，一層層地浮動上去，總能解決問題的。這雖然能省不少事，但很容易造成整個頁面中全是浮動元素，-_-!!! 也只能算是中策而已。
再後來，在網上搜尋別的東西時偶然發現有人說只要在父容器的css屬性中加上以下兩個屬性就可以搞定了：
[www.52css.com]
overflow: auto;
_height: 1%;
試了一下，果然好用，這麼一來，這在目前應該算是解決這一問題的上策了：不需要對頁面做任務修改，也基本上不需要對父容器－－甚至是父容器的父容器做什麼改動，只給父容器新增兩個無所謂的屬性就搞定了。
子元素浮動後 父元素的高度自適應
設定父元素的高度為aotu 或100 或者不設定，那麼父元素會根據子元素的高度而自動調整自身高度。栗子 div id wrap img src 1.png alt logo div id content div div css樣式 wrap content img顯示如下圖 比如給上述栗子的img新...
CSS子元素浮動導致父元素高度塌陷問題
根據w3c標準，在頁面中元素都有乙個隱含的屬性叫做 block formatting context，簡稱 bfc，該屬性可以設定開啟或者關閉，預設是關閉的。當開啟元素的bfc以後，元素會具有以下特性 1.父元素的垂直外邊距不會和子元素重疊 2.開啟 bfc 的元素不會被浮動元素覆蓋 3.開啟 bf...
CSS頁面布局基礎3 元素浮動
1.浮動 float 是基於css的現代web設計用到的主要功能之一，可以用它來建立多累的網頁布局，從無序列表建立導航工具條，不是用table而建立類似 的對其方式等。為使元素浮動到左邊或者右邊，並使後面的文字環繞它，可使用float屬性，float屬性的取值是 none 不浮動 left 向左浮動...