margin实现页面布局

单纯的margin无法完成复杂布局，它更多的是辅助，但却又难以替代。

经典左右结构

两栏结构是最常见和经典的页面呈现形式，如下图1所示：

margin实现

absolute+margin方式

HTML

<header>Header</header><div id="container">      <div id="left">左侧固定宽度Left</div>      <div id="center">主内容自适应Center</div></div><footer>Footer</footer>

CSS

 #container{     position: relative;     min-width: 300px; } #left{     position: absolute;     top: 0;     left: 0;     width: 200px;     background-color: #90baff; } #center{     margin-left: 210px;     background-color: orange; }

如上关键代码，可实现图1布局，该布局的特点之一是#center可以自适应可用空间。
如果想让#left和#center在同行显示，需要改变期限是属性display，或者改变流方式。上述代码中，我们使用absolute，即让#left脱离常规流，通过绝对定位到想要的位置。
由于不希望#center中包含有#left，所以利用margin给#left预留出足够其显示的空间，即达成所需布局。
优点：可以任意调整顺序，即在不修改HTML的情况下，只需简单修改CSS，即可让左右两栏的顺序调换，如下代码：
CSS

#left{     position: absolute;     top: 0;     right: 0;     width: 200px;     background-color: #90baff; } #center{     margin-right: 210px;     background-color: orange; }

缺陷：absolute是定位流，脱离正常排版，即绝对定位元素不影响上下文的排版方式，#left无法撑开父元素的高度，它将移出父元素区域。如下如2：

所以，在内容量不可控的场景中，不推荐使用这种方式。

float+margin方式

HTML

<header>Header</header><div id="container">      <div id="left">左侧固定宽度Left</div>      <div id="center">主内容自适应Center</div></div><footer>Footer</footer>

CSS

 #container{     position: relative;     min-width: 300px; } #left{     float: left;     width: 200px;     background-color: #90baff; } #center{     margin-left: 210px;     background-color: orange; }

如上所述，使用float，即从图文环绕祥泰演变而来。当#left定义了float，那么金穗气候的元素会环绕在其周围。但环绕并不是我们想要的结果，所以利用margin给#left流出足够的显示的空间，终端环绕即可。
此外，这种方式也可以调整栏顺序，但是不支持主内容优先显示（#center元素写在#left元素之前）。

float+负margin方式

HTML

<header>Header</header><div id="container">    <div id="center">主内容自适应Footer</div>    <div id="left">左侧固定宽度Left</div></div><footer>Footer</footer>

CSS

#container{    padding-left:200px;}#left{    float:left;    width:200px;    margin-left:-100%;    position:relative;    left:210px;}#center{    float:left;    width:100%;}

为了让两个块级元素同行显示，需要改变显示方式或者流方式，这种方式选择用float将#left和#center变成浮动流。
#left是定宽，设置其宽度width:200px，#center是自适应，应该怎么做呢？需要在#container中将#left的宽度抛出，宽度全部给#center，即设置#container{padding-left:210px}，再设置#center的宽度width:100%。
然后，将#left挪到为它预留的地方，用负margin,设置#left{margin-left:-100%}，但仅仅只是这样还不行，因为此时#left和#center的起始位置重合。
需要将#left向左偏移210px，如何做到呢？margin已经用过了显然不行，因此可以借助相对偏移，即设置#left{position:relative,left:-210px;}