浮动的详解
实现水平布局：
inline-block：
- inline-bolck的优势：不需要清除浮动，简单，容易设置居中，适合子内容不多的元素水平排列,可以用来两栏布局（同一行内有两个div一个固定宽度，一个自适应）。
<div class="lch">
<span class="box">hello</span>
<span class="box">hello</span>
</div>
<style>
body{
text-align: center;
}
.lch{
font-size: 0;
}
.box{
border: 1px solid red;
width: 100px;
display: inline-bolck;
font-size: 20px;
}
</style>
<!--inline-bolck--!>
- inline-bolck的劣势：使用inline-bolck要注意缝隙问题和顶部对齐问题（vertical-align:top;）以及IE8以下不能使用.
<div class="lch1">固定宽度</div>
<div class="lch2">固定宽度</div>
<div class="li">自适应宽度自适应宽度自适应宽度自适应宽度（没效果的多写几个）</div>
<style>
.lch1{
width: 150px;
height: 800px;
background: red;
float: right;
}
.li{
height: 800px;
background: blue;
margin-right: 160px;
margin-left: 160px;
font-size: 30px;
}
.lch2{
width: 150px;
height: 800px;
background: red;
float: left;
}
</style>
<!--两栏布局--!>
- 注：在书写HTML时，需先写两个固定宽度的两栏再写自适应宽度的一栏，因为浮动并不脱离普通文档流，所以要先行渲染，否则无法达到预期效果，三者无法在一行出现。
浮动：
- 浮动的优势：兼容性好，没有缝隙问题，适合使用两栏布局。
- 浮动的劣势：需要清除浮动，块级元素使用浮动会使宽度收缩，所以使用浮动要注意撑开父元素，避免其带来的许多后续问题；
- 行内元素设置浮动可以设置宽高等类似inline-block的效果。
- 浮动适合稍大的布局;
- 浮动元素不是完全脱离文档流，块盒看不见，但是文本生成的行盒可以（具体例子，比如围绕浮动图片的p标签文本）。
清除浮动：
- clear：left；使用场景是为了清除浮动元素给后续其他元素带来的影响，如若它的左边有浮动元素，他的上边紧贴它在html中之前的最后一个左浮动元素的下边（指整个行盒，不只是展示出来的宽高）。
- clear：right；使用场景是为了清除浮动带来的影响后续元素，如若它的右边有浮动元素，它的上边紧贴它在html中之前的最后一个右浮动元素的下边指整个行盒，不只是展示出来的宽高）。
- clear：both；同事时拥有clear：left；与clear：right的效果，只要该元素前出现浮动，便使它的上边紧贴它在html中之前的最后一个浮动元素的下边（指整个行盒，不只是展示出来的宽高）。
<div class="box box1">1</div>
<div class="box box2">2</div>
<style>
.box{
border: 1px solid;
height:50px;
width: 50px;
}
.box1{
float: right;
}
.box2{
float: right;
clear: right;
}
</style>
<!--利用浮动与清除浮动实现两盒右并列--!>
.clearfix{
*zoom=1;
}
浮动和负边距：
