float与margin构成网页布局框架

命名规则：

1.通栏布局（.con-m）

2.两栏布局（.con-sXm0）

3.三栏布局（.con-sXm0eY）

命名含义如下：

1. 当单元列的宽度为 40px 的倍数时，

  sX  表示 con-sub  的宽度  = X * 40 - 10,
  eY  表示 con-extra  的宽度  = Y * 40 - 10,
  m0  表示 con-main  的宽度  =  总宽度  - (X + Y) * 40,
  s m e  的顺序，可以按全排列排序， sXm0eY 表示各列的排列顺序。

  比如：总宽为 950px 时，.con-e6m0s5 表示 con-extra(230) | con-main(510) | con-sub(190).
  对应的样式为：
 .con-e6m0s5 .con-main { margin: 0 200px 0 240px; }
 .con-e6m0s5 .con-sub { width: 190px; margin-left: -190px; }
 .con-e6m0s5 .con-extra { width: 230px; margin-left: -100%; }

2. 当单元列的宽度不为40px的倍数时， sX和eY中的X 和 Y 直接表示宽度

 比如：总宽为 950px 时，.con-s120m0e50 表示 con-sub(120) | con-main(760) | con-extra(50),
 对应的样式为：
.con-s120m0e50 .con-main { margin: 0 130px 0 60px; }
.con-s120m0e50 .con-sub { width: 120px; margin-left: -100%; }
.con-s120m0e50 .con-extra { width: 50px; margin-left: -50px; }

公共样式

.container{
	width: 950px;
	margin:0 auto;
	zoom: 1;
}
.container:after,.main-wrap:after,.con-sub:after,.con-extra:after,.con-main:after{
	content: "\20";
	clear: both;
	display: block;
}
.main-wrap{
	width: 100%;
	background-color:#ace;
	float:left;
	min-height: 1px;
}
.container,.main-wrap,.con-sub,.con-extra,.con-main{
	zoom: 1;
}
.con-sub,.con-extra{
	float: left;
}
.con-main{
	border:1px solid red;
}
.con-sub{
width: 188px !important;
	border:1px solid green;
}
.con-extra{
width: 188px !important;
	border:1px solid blue;
}
 /*  通栏布局 950 */
.con-m{
   width: 100%;
}
 /* 两栏布局 190--750	*/
.con-s5m0 .con-main{
	margin-left: 200px;
}
.con-s5m0 .con-sub{
	width: 190px;
	margin-left:-100%;

}
/* 两栏布局 750--190	*/
.con-m0s5 .con-main{
	margin-right: 200px;
}
.con-m0s5 .con-sub{
	width: 190px;
	margin-left:-190px;
}

/* 三栏布局 190--190--550 */
.con-e5s5m0 .con-main{
	margin:0 0 0 400px;
}
.con-e5s5m0 .con-sub{
	width: 190px;
	margin-left: -750px;
}
.con-e5s5m0 .con-extra{
	width: 190px;
	margin-left: -100%;
}

/* 三栏布局 190--550--190 */
.con-s5m0e5 .con-main{
	margin:0 200px 0 200px;
}
.con-s5m0e5 .con-sub{
	width: 190px;
	margin-left: -100%;
}
.con-s5m0e5 .con-extra{
	width: 190px;
	margin-left: -190px;
}

/* 三栏布局 550--190--190 */
.con-m0s5e5 .con-main{
	margin:0 400px 0 0;
}
.con-m0s5e5 .con-sub{
	width: 190px;
	margin-left: -390px;
}
.con-m0s5e5 .con-extra{
	width: 190px;
	margin-left: -190px;
}

div布局

<div class="container con-m">
		<div class="main-wrap">
			main-wrap
		</div>
	</div>
	<div class="container con-m">
		<hr />
	</div>
	<div class="container con-s5m0">
		<div class="main-wrap">
			<div class="con-main">
					con-main
			</div>
		</div>
		<div class="con-sub">			
				con-sub
		</div>
	</div>
	
	<div class="container con-m">
		<hr />
	</div>
	<div class="container con-m0s5">
		<div class="main-wrap">
			<div class="con-main">				
					con-main
			</div>
		</div>
		<div class="con-sub">		
				con-sub
		</div>
	</div>
	
	<div class="container con-m">
		<hr />
	</div>
	<div class="container con-e5s5m0">
		<div class="main-wrap">
			<div class="con-main">				
					con-main
			</div>
		</div>
		<div class="con-sub">			
				con-sub
		</div>
		<div class="con-extra">			
				con-sub
		</div>
	</div>
	<div class="container con-m">
		<hr />
	</div>
	<div class="container con-s5m0e5">
		<div class="main-wrap">
			<div class="con-main">				
					con-main
			</div>
		</div>
		<div class="con-sub">			
				con-sub
		</div>
		<div class="con-extra">			
				con-extra
		</div>
	</div>
	
	<div class="container con-m">
		<hr />
	</div>
	<div class="container con-m0s5e5">
		<div class="main-wrap">
			<div class="con-main">				
					con-main
			</div>
		</div>
		<div class="con-sub">			
				con-sub
		</div>
		<div class="con-extra">		
				con-extra
		</div>
	</div>	

预览效果