css经典布局

一、左侧固定宽度右侧宽度自适应布局

实现方法一：float+overflow:hidden

主要思路：左侧盒子设置float:left。右侧盒子设置overflow:hidden，使其不与浮动盒子区域重叠。

HTML代码如下：

<div class="header">左侧固宽，右侧自适应</div>
<div class="wrap">
	<div class="sideBar">左侧固宽</div>
	<div class="content">
	    右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度
	</div>
</div>
<div class="footer">测试前面的布局不会导致后面的变形</div> 

CSS代码如下：

*{
 	margin:0;
 	padding:0;
 }
.header{
	background-color: pink;
}
.sideBar{
	width: 220px;
	float: left;
	background-color: green;
}
.content{
	overflow: hidden;
	background-color:orange;
}
.footer{
	background-color: red;
}

实现方法二：float + 负margin +清除浮动

主要思路：给左侧盒子设置宽度200px，右侧盒子宽度自适应，并设置margin-left:200px。此时发现左右两个盒子不在同一高度，所以给左侧盒子一个负margin-right，将其拉回与右侧盒子同一高度的空间。之后给左右盒子的父元素添加overflow：hidden属性清除浮动。

HTML代码如下：

<div class="header">左侧固宽，右侧自适应</div>
<div class="wrap">
	<div class="sideBar">左侧固宽</div>
	<div class="content">
		右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度
	</div>
</div>
<div class="footer">测试前面的布局不会导致后面的变形</div> 

CSS代码如下：

*{margin:0;padding:0;}
.header{
	background: pink;
}
.footer{
	background: red;
}
.wrap{overflow: hidden;}

.sideBar{
	float: left;
	width: 200px;
	background: #ccc;
	margin-right: -200px;
}
.content{
	float: left;
	background: orange;
	margin-left: 200px;
}

实现方法三：flex 布局

HTML代码如下：

<div class="header">左侧固宽，右侧自适应</div>
<div class="wrap">
	<div class="sideBar">左侧固宽</div>
	<div class="content">
		右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度右侧自适应宽度
	</div>
</div>
<div class="footer">测试前面的布局不会导致后面的变形</div> 

CSS代码如下：

*{margin:0;padding:0;}
.header{
	background: pink;
}
.footer{
	background: red;
}
.wrap{
	display: flex;
}
.sideBar{
	flex: none;
	width: 200px;
	background: #ccc;
}
.content{
	flex: 1;
	background: orange;
}

二、三栏布局之圣杯布局

实现方法：负margin + 相对布局 + 清除浮动

主要思路：父盒子包含三个子盒子（左，中，右），两边的盒子宽度固定，中间盒子宽度自适应。

1. 中间盒子优先渲染，宽度设置为width：100%， 独占一行，左浮动；
2. 左右两个盒子宽、高固定，左浮动；
3. 使用负边距使左右两个盒子与中间盒子在同一高度；左边盒子设置 margin-left:100%；右边盒子设置 margin-left:-右边盒子宽度;
4. 这时我们发现中间盒子里的内容会被左右盒子给压住一部分，所以给父盒子设置左右 padding 来为两边盒子空出位置；
5. 对左右盒子使用相对布局来占据 padding 的空白，避免中间盒子的内容被左右盒子覆盖；
6. 给父元素添加 overflow:hidden 属性；

HTML代码如下：

<div class="header">圣杯布局</div>  
<div class="wrap">  
     <div class="middle">中间弹性区 </div>  
     <div class="left">左侧固宽</div>  
     <div class="right">右侧固宽</div>  
</div>  
<div class="footer">测试前面的布局不会导致后面的变形</div> 

CSS代码如下：

*{margin:0;padding:0;}
.header{
	background: pink;
}
.footer{
	background: red;
}
.wrap{
	overflow: hidden;
	padding: 0 200px;
}
.middle{
	width: 100%;
	float: left;
	background-color: orange;
	height: 200px;
}
.left{
	float: left;
    width: 200px;
    height: 200px;
    background-color: #ccc;
    margin-left: -100%;
    position: relative;
    left:-200px;
}
.right{
	float: left;
	width: 200px;
	height: 200px;
	background-color: #777;
	margin-left: -200px;
	position: relative;
	right: -200px;
}

三、三栏布局之双飞翼布局

实现方法：负margin + 清除浮动

主要思路： 父盒子包含三个子盒子（左，中，右），两边的盒子宽度固定，中间盒子宽度自适应。

1. 中间盒子优先渲染，宽度设置为width：100%， 独占一行，左浮动；
2. 左右两个盒子宽、高固定，左浮动；
3. 使用负边距使左右两个盒子与中间盒子在同一高度；左边盒子设置 margin-left:100%；右边盒子设置 margin-left:-右边盒子宽度;
4. 这时我们也会发现中间盒子里的内容会被左右盒子给压住一部分，与圣杯布局不同的是，双飞翼布局是在中间盒子里新添加了一个子盒子，并设置其margin-left 和margin-right 来为两边盒子空出位置；
5. 给父元素添加 overflow:hidden 属性；

HTML代码如下：

<div class="header">双飞翼布局</div>
<div class="wrap">
	<div class="middle">
	     <div class="middle-content">中间弹性区</div>	 
	</div>
	<div class="left">左侧固宽</div>
	<div class="right">右侧固宽</div>
</div>
<div class="footer">测试前面的布局不会导致后面的变形</div> 

CSS代码如下：

*{margin:0;padding:0;}
.header{
	background: pink;
}
.footer{
	background: red;
}
.wrap{
	overflow: hidden;
}
.middle{
	width: 100%;
	float: left;
	background-color: orange;
	height: 200px;
}
.left{
	float: left;
    width: 200px;
    height: 200px;
    background-color: #ccc;
    margin-left: -100%;
}
.right{
	float: left;
	width: 200px;
	height: 200px;
	background-color: #777;
	margin-left: -200px;
}
.middle-content{
	margin-left: 200px;
	margin-right: 200px;
}

四、Flex布局实现三栏布局

HTML代码如下：

<div class="header">Flex布局实现三栏布局</div>
<div class="wrap">
     <div class="middle">中间弹性区</div>
     <div class="left">左侧固宽</div>
     <div class="right">右侧固宽</div>
</div>
<div class="footer">测试前面的布局不会导致后面的变形</div> 

CSS代码如下：

*{margin:0;padding:0;}
.header{
	background: pink;
}
.footer{
	background: red;
}
.wrap{
	display: flex;
}
.middle{
	flex: 1;
	order:2;
	background-color: orange;
}
.left{
	flex: none;
	width: 200px;
    height: 200px;
    background-color: #ccc;
    order:1;
}
.right{
	flex: none;
	width: 200px;
	height: 200px;
	background-color: #777;
	order:3;
}

希望能给大家带来帮助！