原理：当子元素处于浮动状态，设置负margin>=子元素宽度时，子元素会覆盖到兄弟元素上
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
html,body {
height: 100%; // 浏览器一般默认解释为内容的高度，而不是100%，只有这样设置，才可以100%
}
.main {
height: 100%;
float:left;
background: #00ff90;
width:100%;
box-sizing:border-box;//这样设置后，盒子的宽度/高度 包括boder，paddingg ，不管boder，padding 为多少，盒子宽度/高度始终不变
padding-left:300px;
padding-right:200px;
margin-left:30px;
}
.left {
float:left;
height: 100%;
background: #ff6a00;
width: 300px;
margin-left:-100%; //设置负margin >=main div 的宽度，则覆盖到main div 上
}
.right {
float:left;
height: 100%;
background-color: #b200ff;
width: 200px;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="main">
这里是main 这里是main内容
</div>
<div class="left">
左边栏
</div>
<div class="right">
右边栏
</div>
</body>
</html>
左右列内容宽度固定，中间列内容宽度自适应
扩展：
box-sizing：content-box
元素的宽度/高度不包括padding 和border
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
box-sizing：border-box
元素的宽度/高度包括padding 和border，怎么设置padding 和border，元素的宽度/高度也不会变化
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
box-sizing：inherit
规定应从父元素继承 box-sizing 属性的值
