一、float实现
html结构：
[html] view plain copy
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
css：
[css] view plain copy
.left,.right{
width: 200px
height: 300px
background-color: red
}
.left{
float: left
}
.right{
float: right
}
.center{
margin: 0 210px
height: 300px
background-color: blue
}
这种实现受外界影响小，但是对html结构有要求（center必须放在最后，left与right则无所谓），当界面缩小到一定程度时，right会被挤到下一行
二、position实现
html结构：
[html] view plain copy
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
css：
[css] view plain copy
.left,.right{
position: absolute
width: 200px
height: 300px
background-color: yellow
}
.left{
left: 0
}
.right{
right: 0
}
.center{
margin: 0 210px
height: 300px
background-color: blue
}
该法布局的好处，三个div顺序可以任意改变。不足是 因为绝对定位，所以如果页面上还有其他内容，top的值需要小心处理，最好能够对css样式进行一个初始化，如果不对样式进行初始化，则两边和中间的值会对不齐。 另外，随着浏览器窗口缩小，小于200px的时候，会发生重叠。
方法一： 利用position绝对定位+BFChtml:
css:
方法二：flex布局
html:
css:
前几天去猿辅导面试的css面试题，当时太紧张了，就想着怎么按百分比或者是位移搞，但是冷静下来，css复杂的定位就给元素包爸爸，几乎能解决一大票问题。细致的描述问题：
一个父元素里面有四个子元素，按田字排列，子元素之间间距10px,和父元素之间的间距也是10px，父元素缩放时子元素要自适应。
解决思路就是父元素里面再包一层，来解决父元素和子元素间距10 的问题。
四个子元素分别再包一层b,b就负责宽高占父元素的50%，里面的b-inner，负责子元素之间的间距。用position absolute相对b进行定位，搞出间距，注意平分公共间距一个子元素应该位移的是5px。
