div+css網頁布局常用到浮動方案，但浮動並不像**那樣好用，很多時候會出問題。同時設計不夠良好的浮動布局，在不同的瀏覽器下會有不同的表 現，可能設計時照著常用的瀏覽器做好了，拿到其它瀏覽器裡一看又亂掉了。瀏器自身的問題往往是這些麻煩的罪魁禍首。firefox對標準的支援較好 些，ie7、ie8次之，ie6目前使用者群較多，但也比較糟糕，經常莫名其妙地多出一些空隙等等。拿浮動布局來說，你算好的寬度在firefox以及 ie7、ie8下可能是正常的，拿到ie6裡就會發現不該換行的時候它卻換行了。
然而，不管html頁面設計人員怎麼罵微軟，網頁還是要做的。我這裡就以自己的經驗給大家介紹一些常用的解決方案。
1、如果是兩欄並列，要在中間顯示分界線或，可以使用repeat-y的背景來實現，此樣式寫在這兩欄的父級元素中，可以保證分界線與最高的欄等高。
示例：第一列
第二列
假設vline.gif是寬100px高1px，左邊99畫素為白色，最右邊1畫素是黑色，則此背景實現的效果就是在兩列間拉出一條黑色豎線。
不過要說明一下，這種方法如果父元素寬度設計200px，理論上是正確的，但實際上在ie6裡會換行，因為ie6不遵從w3c標準。在ie6裡你可以把父元素寬度設得比200px大一些，但這樣格式會不夠完美。你可以用下面的margin法解決這個換行問題。
2、如果有一列想用自適應寬度，而不是固定寬度，可以巧用margin屬性。比如左邊固定100px，右邊自適應，則可以讓父元素「margin- left:100px」，第一列再「margin-left:-100px」，第二列就可以用「width:100%」來實現自適應寬度了。如果不這樣巧 用margin，第二列沒法設百分比，因為瀏覽器客戶區寬度*100%+100px是超出瀏覽器客戶區總寬度的，瀏覽器會出現橫向滾動條；又因為瀏覽器客 戶區總寬度不確定（確定的話就不用什麼自適應了），你也沒法用類似80%這樣的百分比使其正好撇下100px給第一列。
另外你可能想讓這兩列的父級有乙個最小寬度以避免兩列換行，這個可以用min-width屬性來實現。
示例**：
第一列第二列
3、自適應高度的該如何設計呢？很多人為這個問題頭痛過，抱怨height:100%不管用。其實，讓它管用很簡單，只是別忘了給html也加上 height:100%的屬性。沒錯，就是html，你可以寫成這樣：html,body。但這樣還有個問題，沒解決。如果你 想讓一行字始中處於最下面，該怎麼做呢？答案還是margin。
你可以把主體部分放在乙個div中，將其最小高度設為100%，然後在後面放頁尾的div，假如它的高度為40px，則「margin- top:-40px」，這樣可能會使主體部分下邊的內容被遮住，解決辦法是在主體部分最下面的元素上加「padding-bottom:40px」屬性即 可。理論上講加「margin-bottom:40px」也可以，但觀查發現在ie裡會出現垂直滾動條。
示例**：
峰之部落 div+css浮動布局完美解決方案
頁尾始終在底部
注意別忘了樣式表中要加：html,body 峰之部落
這三招應用技巧，基本能解決div+css浮動布局的常見問題，且能較好的相容不同的瀏覽器。
DIV CSS布局 CSS浮動float屬性詳解
在傳統的 布局中，我們對 應該對齊方式對實現了對布局的應用，而應用web標準構建網頁以後，float浮動屬性是布局中非 常重要的屬性，我們常常通過對div元素應用float浮動來進行布局，不但對整個版式進行規劃，也可以對一些基本元素如導航等進行排列。我們來看看float屬性基本釋義 該屬性的值指出了...
完美解決浮動產生的影響
浮動 相信對於很多前端的同學都不是事，不過最近有後端小哥哥向我詢問關於浮動的問題，下面我就簡單介紹一下浮動會產生什麼問題，並且該怎樣去解決，相信聰明的你一看就懂了。在講浮動之前，首先宣告一下行內元素和塊級元素的概念 簡單來說，行內元素就是不可設定寬高，且與其它元素併排顯示的元素 a img標籤等 而...
flex布局下overflow失效解決方案
這裡使用經典的兩欄布局 比如說我們想讓中間部分自適應並且超出長度出現滾動 dom結構簡單如下 class container class left div class content span span span div class right div div 樣式檔案這裡就直接使用less寫了 c...