單純的margin無法完成複雜布局，它更多的是輔助，但卻又難以替代。
兩欄結構是最常見和經典的頁面呈現形式，如下圖1所示：
margin實現
absolute+margin方式
html
headerheader>
id="container">
id="left">左側固定寬度leftdiv>
id="center">主內容自適應centerdiv>
div>
footerfooter>css
#container
#left
#center
如果想讓#left和#center在同行顯示，需要改變期限是屬性display，或者改變流方式。上述**中，我們使用absolute，即讓#left脫離常規流，通過絕對定位到想要的位置。
由於不希望#center中包含有#left，所以利用margin給#left預留出足夠其顯示的空間，即達成所需布局。
優點：可以任意調整順序，即在不修改html的情況下，只需簡單修改css，即可讓左右兩欄的順序調換，如下**：
css
#left
#center
所以，在內容量不可控的場景中，不推薦使用這種方式。
float+margin方式
html
headerheader>
id="container">
id="left">左側固定寬度leftdiv>
id="center">主內容自適應centerdiv>
div>
footerfooter>css
#container
#left
#center
此外，這種方式也可以調整欄順序，但是不支援主內容優先顯示（#center元素寫在#left元素之前）。
float+負margin方式
html
headerheader>
id="container">
id="center">主內容自適應footerdiv>
id="left">左側固定寬度leftdiv>
div>
footerfooter>css
#container
#left
#center
#left是定寬，設定其寬度width:200px，#center是自適應，應該怎麼做呢？需要在#container中將#left的寬度丟擲，寬度全部給#center，即設定#container，再設定#center的寬度width:100%。
然後，將#left挪到為它預留的地方，用負margin,設定#left，但僅僅只是這樣還不行，因為此時#left和#center的起始位置重合。
需要將#left向左偏移210px，如何做到呢？margin已經用過了顯然不行，因此可以借助相對偏移，即設定#left
利用margin實現等高布局
複製 如下 www.cppcns.com id main 我是左邊的內容的啦啦啦啦。我是左邊的內jodaxzuti容的啦啦啦啦。我是左邊的內容的啦啦啦啦。我是左邊的內容的啦啦啦啦。我www.cppcns.com是左邊的內容的啦啦啦啦。左邊的內容.哈哈哈哈哈 複製 如下www.cppcns.com o...
實現頁面布局
當我們開發乙個 的時候，有幾種我們常見的頁面布局的方法，比如多欄布局頁面 彈性布局頁面。利用布局的方法使我們的頁面更完整更美觀。下面是我用 實現的多欄布局頁面 如下圖 首先建立頭部乙個div為box類，中間建立乙個大的div包裹著三個小的div，分別給它們設定類，尾部就跟頭部一樣然後設定乙個類box...
（負值） margin在頁面布局中的應用
此例適用於左右欄寬度固定，中間欄寬度自適應的布局。由於網頁的主體部分一般在中間，很多網頁都需要中間列優先載入，而這種布局剛好滿足此需求。專案中經常會使用浮動列表展示資訊，為了美觀通常為每個列表之間設定一定的間距 margin right 當父元素的寬度固定式，每一行的最右端的li元素的右邊距就多餘了...