自适应多列布局
多列布局自适应是一个经常被问到的问题，所以今天仔细看了一下，首先是BFC实现多列布局是一个经典的例子。
什么是BFC？
BFC称为块级格式上下文，它是由于块级元素设置了某些属性而形成的一个独立的区域。在这个区域中，它里面的布局不会影响到外面元素的布局，反之也一样。
可以触发BFC的属性：
1、 float属性不为none
2、 position为absolute或fixed
3、 overflow的值不为visible
4、 display的值为table-cell，table-caption，inline-block中的任何一个。
一、实现自适应的两列布局：
首先来使用最基础的方法实现两列布局，左边固定宽度，右面自适应 。
①。div+float+margin
<div class= "left">div>
<div class = "right">div>
<style>
.left{
width:180px;
height:100px;
float:left;
background-color:red;
}
.right{
margin-left:180px;
background-color:blue;
height:100px;
}
style>
右边蓝色的是自适应的，但这样做的缺点就是，margin-left的值每次都要设置和左边一样的宽度。
② 使用BFC的特性：BFC的区域不会与外部浮动元素重叠。那么我们就可以使浮动元素的右边为BFC区域就可以，使用overflow:hidden来实现BFC。
只需将right中改为如下：
.right{
overflow: hidden;
background-color:blue;
height:100px;
}可以实现与方法一同样的效果。
除此之外还可以设置display:table-cell;width:9999px;
③。使用table+css实现
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
.left{
width: 100px;
background-color:red;
}
.right{
background-color:green;
}
.content{
width: 100%;
height: 100px;
border: 0px;
border-collapse: collapse;
}
那么左侧自适应右侧定宽该怎样实现？
首先使两个元素向左浮动，这时候处于同一行，如果左侧不设置宽度的话，那么是不能显示的，如果设置宽度该设置多少呢？先设成100%；那么右边的元素就会被挤到下一行浮动，再左侧加上margin-right:右侧元素的宽度，这样就可以实现了。
.left{
float: left;
height: 100px;
background-color: red;
width: 100%;
margin-right: -200px;
}
.right{
float: left;
height: 100px;
width: 200px;
background-color: blue;
}
现两边宽度固定中间自适应的三列布局：
①。div + float + margin-left + margin-right
从上面实现两列布局的第一种方法，我们使用div + float + margin-left实现右侧宽度自适应，当要实现中间自适应时，可以给中间的元素加上margin-right。
代码如下
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.left{
width:180px;
height:100px;
float:left;
background-color:red;
}
.right{
width:180px;
height:100px;
float:right;
background-color:green;
}
.center{
/* display: table-cell;
width: 9999px;*/
margin-left: 180px;
margin-right: 180px;
background-color:blue;
height:100px;
}
style>
head>
<body>
<div class= "left">div>
<div class = "right">div>
<div class = "center">div>
body> <div class= "left">div>
<div class = "center">div>
<div class = "right">div>.center{
/* display: table-cell;
width: 9999px;*/
overflow: hidden;
background-color:blue;
height:100px;
}三、两列宽度自适应，中间宽度固定。
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
.left{
width:50%;
margin-left: -100px;
height:100px;
float:left;
background-color:red;
}
.center{
width: 200px;
float: left;
background-color:blue;
height:100px;
}
.right{
width:50%;
height:100px;
margin-left: -100px;
float:left;
background-color:green;
}使用table+css
.left{
background-color:red;
}
.center{
width: 100px;
background-color:blue;
}
.right{
background-color:green;
}