如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
http://www.cnblogs.com/honoka/p/5156133.html
3种方案。1：position，2：float，3：BFC
其中第3种：
BFC 可以帮助我们解决布局中左边元素脱离文档流后，右边元素的左外边距会触碰到包含块容器的左外边框的问题，就像下图：
将右边元素射程BFC即可避免此情况。（使元素不受左边浮动元素的影响）
*{
margin: 0;
padding: 0;
}
.all{
width: 300px;
float: left;
border: 1px solid gray;
}
.leftbox{
background-color: red;
float: left;
width:200px;
height: 200px;
}
.rightbox{
background-color: yellow;
height: 500px;
word-wrap:break-word;
word-break:break-all;
overflow: hidden; /*使其不受左边浮动元素的影响*/
}
</style>
</head>
<body>
<div class="all">
<div class="leftbox">left</div>
<p class="rightbox">
rightrightrightrightrightrightrightrightrightrightrightrightrightrighrightrightrightrightrightrightrightrightrightrightrightrightrightrighrightrightrightrightrightrightrightrightrightrightrightrightrightrighrightrightrightrightrightrightrightrightrightrightrightrightrightrigh
</p>
</div>
</body>
</html>
两侧宽度固定，中间宽度自适应的三栏布局
5种方案
https://www.cnblogs.com/honoka/p/5161836.html
1.浮动 2.BFC 3.圣杯 4.双飞翼 5.flex
圣杯和双飞翼：（下面这个链接介绍的很清楚,这篇文章真的非常好）
https://www.jianshu.com/p/81ef7e7094e8 （不能忽略中间块的width：100%）
注意两者都是先渲染中间的部分，否则会错乱
圣杯：（注意看里面的注释）
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<title>圣杯布局</title>
<style type ="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 650px; /*最小宽度left+left（这里是relative在center上偏移的距离）+right*/
}
.header{
width: 100%;
background-color: lightblue;
}
.footer{
clear: both;
width: 100%;
background-color: lightblue;
}
.all{
/*width: 100%;*/ /*这里不能设宽度100%，因为有margin距离，如果设置整体宽度会超出*/
padding-left: 250px;
padding-right: 150px;
}
.leftbox{
background-color: red;
width:250px;
height: 250px;
float: left;
margin-left: -100%; /*因为margin的百分比是相对与父元素的，所以需要整整一行的宽度才能补偿这个margin的值，所以left就能到center的左边*/
position: relative;
right: 250px; /*这个relative是指相对于这个对象原来所在位置（参照）的值，如某个对象有"position:relative"的样式，那么设置css 10px", 结果是该对象相对其原来位置像正方向（向下）偏移10px。*/
}
.rightbox{
background-color: blue;
width:150px;
height: 150px;
float: left;
margin-right: -150px; /*相对于center的右边界定位，如果margin-right: -20px，就是rightbox的右边界在center的右边界向左20px,这里-150px，即rightbox的右边界与center右边界距离150px,且在right右边界在center右边界的向右150px*/
}
.center{
background-color: yellow;
float: left;
width: 100%;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="all">
<div class="center">aaa rightright rightright rightrightrightrightright rightrigh trightrightrig hrightrightr ightrightr ightr ightrightrightrig htri ghtrightrightrig htrighrigh trightri ghtrightright rightrigh trightri ghtright rightrightr ightrighrig htrightrightright rightright rightrigh trightr ightrightr ightrightrigh bbcc</div>
<div class="leftbox">left</div>
<div class="rightbox">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
双飞翼
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<title>双飞翼布局</title>
<style type ="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 600px; /*最小宽度left+right*/
}
.header{
width: 100%;
background-color: lightblue;
}
.footer{
clear: both;
width: 100%;
background-color: lightblue;
}
.container{
float: left;
width: 100%;
background-color: yellow;
}
.center{
background-color: orange;
margin-left: 250px;
margin-right: 350px;
}
.leftbox{
background-color: red;
width:250px;
height: 250px;
float: left;
margin-left: -100%;
}
.rightbox{
background-color: blue;
width:350px;
height: 350px;
float: left;
margin-left: -350px; /*向左偏移*/
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="center">
aaa rightright rightright rightrightrightrightright rightrigh trightrightrig hrightrightr ightrightr ightr ightrightrightrig htri ghtrightrightrig htrighrigh trightri ghtrightright rightrigh trightri ghtright rightrightr ightrighrig htrightrightright rightright rightrigh trightr ightrightr ightrightrigh bbcc
</div>
</div>
<div class="leftbox">left</div>
<div class="rightbox">right</div>
<div class="footer">footer</div>
</body>
</html>
双飞翼变动：
增加的container是为了控制宽度，我们把这个div去掉，使结构更简单，但兼容性降低结构变为
<div class="header">header</div>
<div class="center"> aaa </div>
<div class="leftbox">left</div>
<div class="rightbox">right</div>
<div class="footer">footer</div>
1.使用calc
.center{
float: left;
background-color: orange;
margin-left: 250px;
margin-right: 350px;
width: calc(100%-600px);
}
2.border-box
.center{
float: left;
background-color: orange;
padding-left: 250px; /*把margin变为padding*/
padding-right: 350px;
box-sizing: border-box; /*告诉浏览器去理解你设置的边框和内边距的值包含在width内*/
width: 100%;
}
box-sizing 属性可以被用来调整这些表现:
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
border-box width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。
这里的维度计算为： width = border + padding + 内容的 width， height = border + padding + 内容的 height。
flex： 很方便简单
#container {
display: flex;
}
#center {
flex: 1;
}
#left {
flex: 0 0 200px;
order: -1;
}
#right {
flex: 0 0 150px;
}