三列布局，中间自适应，尝试了两种方法
float
.mydiv{
background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
overflow: auto;}
.left {
float: left;
width: 160px;
height: 100px;
background: blue;
padding: 20px;
}
.right{
float: right;
width: 80px;
height: 300px;
background: blue;
padding: 20px;}
.middle{
margin-left: 220px;
margin-right: 140px;
background: red;
height: 200px;
padding: 20px;}
.clearfix{
clear: both;}
看到一篇文章：http://www.barelyfitz.com/screencast/html-training/css/positioning/，里面有这么一句话：
We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it.
“wrap around it”非常重要，float与absolute有类似的功能，在这一点上却大不相同，下面会讲到。
position
mydiv{
background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
position: relative;}
left {
position: absolute;
left: 20px;
width: 160px;
height: 100px;
padding: 20px;}
right{
position: absolute;
right: 20px;
width: 80px;
height: 260px;
padding: 20px;/*absolute已经脱离文档流，无法撑开父元素;*/}
middle{
margin-left: 220px;
margin-right: 140px;
height: 200px;
padding: 20px;}
需要设置父元素为relative，子元素的absolute才会相对于父元素绝对定位。
这种方法的局限性在于，必须设置父元素的高度为固定，因为absolute的子元素已经脱离文档流，不能撑开父元素，或者会遮盖同级的兄弟元素。
也就是说这种方法不能自适应高度布局。对于子元素高度不确定的情况这种方法也就不能使用了。当然用js脚本进行控制也可以。
关于absolute和float区别。
absolute是完全脱离文档流，两个设置了absolute的元素甚至都可以互相覆盖。
而关于float，W3C手册中有这么一句话：由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
对于普通流中的块框不存在，也就是说对于float元素、文档中的行内元素，浮动元素是存在的。表达有点晦涩？？？具体的说，float:left遇到float:left,会停下来并排显示而不是覆盖。而对于行内元素：图片和文字，会“wrap around it”，就是包围float元素。
但是float和absolute都会出现无法撑开父元素的问题：
这时候absolute就比较鸡肋了，在多栏不确定高度的布局中，absolute没有办法解决父元素自适应高度的问题（参考：http://www.barelyfitz.com/screencast/html-training/css/positioning/）而float可以有一些清除float的方法，上面采用了overflow: auto;和.clearfix方法。清除浮动绝对是个大问题，接下来也会继续学习。
原文地址：https://www.cnblogs.com/jlfw/p/12643888.html