浮动的详解

实现水平布局：

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>
<!--利用浮动与清除浮动实现两盒右并列--!>

• 对于IE6，7的清除浮动：

  .clearfix{
      *zoom=1;
}

浮动和负边距：

• 两个浮动元素，如果因放不下而导致其中一个下移，对下移元素设置负margin到一定宽度宽度可将其上移。
• 注释：有兴趣的可以了解下圣杯布局与双飞翼布局。

   <div class="lch">
       <div class="box box1">box1</div>
       <div class="box box2">box2</div>
   </div>
   <style>
       .lch{
           width: 600px;
           height: 800px;
           border: 1px solid red;
       }
       .box1{
           width: 600px;
           height: 100px;
           background: yellow;
           border: 1px solid;
           float: left;
       }
       .box2{
           width: 100px;
           height: 100px;
           border: 1px solid;
           background: pink;
           float: left;
           margin-left: -104px;
       }
   </style>
  <!--负边距问题--!>