float，浮动布局
值为left,right,none
设置之后，默认宽度为文档宽度，同时脱离文档流，向指定的方向异动
设置了浮动之后，脱离文档流但会相互影响，不会重叠
期间，如果父元素没有设置高度，若子元素脱离文档流，会导致父元素没有内容而收缩
如何设置父元素的高度没有收缩，那么就用到了clear属性
在浮动后面加上<div style="clear:both"></div>
或者
使用伪类清除浮动，例如：
.content:after{
content:"";
display:block;
clear:both;
}
案例应用：
左侧定宽+右侧自适应
.left{
float:left;
width:200px;
height:100%
}
.right{
width:100%;
height:100%;
margin-left:200px;
}
左中右布局，左右定宽+中间自适应
.left{
float:left;
width:200px;
height:100%;
}
.right{
float:right;
width:200px;
height:100%;
}
.middle{
height:100%;
margin-left:200px;
margin-right:200px;
}
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
注意：这边中间自适应的元素必须写在两个浮动的后面