标签：
# 布局方式 #
负边距布局法：
## 1.两栏和三栏 ##
利用margin的负像素，实现把位置给旁边的元素！
如果其中有内容，如果不想其两块元素不发生重叠，便加一个DIV子元素，让其margin的值为负像素的正值！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
ul{
list-style-type: none;
}
.header{
background: red;
}
.main{
float:left;
background: yellow;
width:100%;
margin-right:-200px;
}
.main-content{
background: green;
margin-right:200px;
margin-left:150px;
}
.right-aside{
float:right;
background: yellow;
width:200px;
}
.nav{
width:150px;
background: #00ffff;
float:left;
}
.left{
background: #00ffff;
}
.footer{
clear:both;
background: blue;
}
</style>
</head>
<body>
<header class="header">
<h1>顶部区域</h1>
</header>
<section class="main">
<div class="left">
<nav class="nav">
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
<li>菜单五</li>
</ul>
</nav>
<div class="main-content">
<h1>内容标题</h1>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</div>
</div>
</section>
<aside class="right-aside">
<h1>文章栏目</h1>
<ul>
<li>栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
</ul>
</aside>
<footer class="footer">
<h1>底部区域</h1>
</footer>
</body>
</html>
## 2.圣杯布局 ##
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{
margin:0;
padding:0;
}
body{
min-width: 500px
}
.header{
background: red;
}
.container{
padding-left:150px;
padding-right:200px;
overflow: hidden;
}
.content{
background: green;
width:100%;
}
.left{
background: cyan;
width:150px;
margin-left:-100%;
right:150px;
}
.right{
background: yellow;
width:200px;
margin-right:-200px;
}
.content,.left,.right{
float:left;
position: relative;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.footer{
clear:both;
background: blue;
}
ul{
list-style-type: none;
}
</style>
</head>
<body>
<header class="header">
<h1>顶部区域</h1>
</header>
<div class="container">
<div class="content">
<h1>内容标题</h1>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
</div>
<div class="left">
<nav>
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
<li>菜单五</li>
</ul>
</nav>
</div>
<div class="right">
<aside>
<h1>文章栏目</h1>
<ul>
<li>栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
</ul>
</aside>
</div>
</div>
<footer class="footer">
<h1>底部区域</h1>
</footer>
</body>
</html>
利用padding腾出位置，浮动。再使用margin-100%将位置腾出；再用相对定位position: relative;把两边元素移过去，让中间的元素的位置占据。颜色，使用三个元素的padding挤出多余的位置。然后overflow hidden 再使用margin：-XX 的方式，使他颜色大小一致；
# 标签 #
## BFC/IFC ##
BFC：block formating context 块级格式化上下文；触发BFC的环境，使元素成为一个单独的元素块，不受其他元素的影响！
BFC的触发方式：overflow：hidden；
IFC：inline formating context 行级格式上下文；默认的是触发IFC环境
标签大概分为三类：block，inline（行级）；inline level（块级）；run-in（自适应标签）；
标签：
原文地址：http://www.cnblogs.com/rengpiaomiao/p/4678978.html
