9.清除浮动（难）

1. 常常不将父盒子设定高度，因为这样可能导致子盒子高度大于父盒子而溢出。但是这样会使子元素在浮动时互相贴
   
2. 方法一：给浮动元素的祖元素加高度（有高度的盒子才能关住浮动）

   <ul class="box1">
     <li>学习</li>
     <li>生活</li>
     <li>啪啪啪</li>
   </ul>
   <ul class="box2">
     <li>吃</li>//没有高度的容器关不住浮动会向上贴
     <li>喝</li>
     <li>拉</li>
   </ul>
   
   ul{
     height: 60px;//祖先盒子高度还需不小于子元素高度
   }
   li{//ul中li浮动
     float: left;
     width: 90px;
     height: 40px;
     text-align: center;
     background-color: skyblue;
   }

3. 方法二：clear:both;

   .box2{
    clear:both;//left;right;清除别人对我的影响，即上一个盒子未设置高度
   }
   这种方法margin会失效，不起作用

4. 方法三：两者之间加盒子

   隔墙法
    .blank1{
      clear:both;
      height:10px;//加空白，不对margin/padding设0不用，因为有默认
    }
    <ul></ul>
    <div class="blank1"></div>
    <ul></ul>
   内墙法
     <ul>
       <li></li>
       <div class="blank1"></div>
     </ul>
    .blank1{
      clear:both;
      margin-top:10px;
    }
   父盒子不能被浮动元素撑出高
   <div>
    <p></p>
    <p></p>
    <p class="blank"></p>
   </div>
   .blank{
    clear:both;//前两个浮动撑不起父盒子，用第三个
   }

5. 方法四：overflow:hidden(溢出边框的内容隐藏）

   本意清除溢出到盒子外面的内容
   父盒子不能被浮动的子盒子撑出高，但给父盒子加个overflow:hidden就可以了
   *{
     padding: 0;
     margin: 0;
    }
    div{
     width: 100px;
     overflow: hidden;//此时父盒子高度随子盒子最大高度变化而变，此时margin依然生效
     border: 10px solid black;
    }
    .p1{
     float:left;
     height: 30px;
     width: 10px;
     background-color: blue;	
    }
    .p2{
     float:left;          
     height: 90px;
     width: 20px;
     background-color: green;	
    }
    .p3{
     float:left;
     height: 70px;
     width: 30px;
     background-color: yellow;	
     }
     <div>
       <p class="p1"></p>
       <p class="p2"></p>
       <p class="p3"></p>
     </div>

   
   
   
6. 小例子

   ul{
      width: 300px;
    }
   li{
     overflow: hidden;//相当于li有了高度，能关住浮动
     list-style: none;
     border-bottom: 1px dotted black;
    }
   ul li .news{
     float: left;
    }
   ul li .date{
     float: right;
   }
    <ul>
     <li>
      <span class="news">哈哈</span>
      <span class="date">14年9月12日</span>
     </li>
     <li>
      <span class="news">嘻嘻嘻</span>
      <span class="date">14年9月12日</span>
     </li>
     <li>
      <span class="news">呜呜呜</span>
      <span class="date">14年9月12日</span>
     </li>
    </ul>