前端頁面的布局方式常用到的大概有三種方式分別為普通文檔流布局、浮動布局和絕對布局。下面將分別介紹着三類布局。
a、普通布局：前端中用到的標簽主要分為塊級標簽（display：blcok）和行級標簽(display:inline)。塊級標簽為必須占一行的標簽元素，后面的元素必須在下一行顯示；行級標簽是顯示時后面的行級元素緊跟着前一個行級標簽顯示。普通布局是在按照這些元素的特性進行界面的布局，從左到右，從上到下的順序進行。另：普通元素的position為static。
b、浮動布局：浮動布局包括左右浮動，即相對於普通布局，該布局元素會脫離普通布局也是流布局，相當於浮動元素會在普通布局之上進行界面的布局，會導致的問題就是會有普通布局的部分被浮動布局元素給遮擋，解決辦法為清除浮動，即在被遮擋的普通元素上添加clear：both進行浮動的清除，使得普通布局的元素不會跟浮動元素在一行顯示並另起一行進行dom文檔的渲染，清除浮動還有其他辦法請自行查詢。另：浮動布局中浮動的范圍是根據父元素的位置進行浮動位置定位。
c、絕對布局：常用的position為absolute時的元素會進行絕對布局。絕對定位的參考位置為其祖先元素中position為非static的第一個元素。所以一般將參考位置元素設置為position：relative。
除了以上三種布局方式，還有常使用的布局辦法：
橫向布局：豎向布局相對容易，只需要進行塊狀元素的上下堆疊，橫向布局一般采用浮動的方式進行布局，即多個塊狀元素進行元素的浮動並按照浮動的方向進行堆疊；另橫向布局還可以采用display：inline-block的方式進行，另ie6下可以使用_display：inline的hack實現，可以實現區域塊在父級元素寬度能容納 的情況下橫向堆疊。
居中方法：居中是布局中常用方法，其中居中的方法分為限制寬度的塊狀元素和行級元素。前者使用常規辦法margin：0 auto實現；后者使用text-align：center實現行級元素在其所在的塊級區域中的居中，另
ie6將塊級元素設置為行級后也使用該辦法是實現居中。
界面自適應：布局的自適應其實主要是寬度的自適應，對於常見的分辨率的pc顯示器屏界面都能友好的適應，不出現混亂和疊壓的情況，但是對於非pc顯示器的適應就要通過響應式進行，此處不討論。自適應辦法：對於界面整體布局的區域寬度采用百分比寬度設置，例如”前端html文檔的基本布局“中界面的區域塊的寬度采用百分比布局，具體定位到什么級別大小的區域塊具體看頁面自定。對於相對細級別的區域塊或者說是內容塊可以使用絕對大小px進行布局，以上基本實現自適應。
以上為當前項目中常用到的一些方法，為了兼容ie低版本所以使用的都是比較傳統的辦法，隨着現代瀏覽器的發展以及ie低版本的放棄，更好的布局方式未在本文羅列。以上為個人項目總結，沒有涉及之處以及其中存在的問題請包涵並指出。