HTML+CSS入门如何清除浮动-职坐标

HTML+CSS入门如何清除浮动

沉沙 2018-09-18 来源：阅读 614 评论 0

摘要：本篇教程介绍了HTML+CSS入门如何清除浮动，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门如何清除浮动，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>清除浮动(闭合浮动)</title>  <style type="text/css">          ul{   margin:0;   padding:0;   list-style:none;     }
      .parent{       /*          height:300px;或者给父元素设置高度            overflow:hidden;这也是清除浮动的一种方式它会重新计算高度       */           width:300px;     margin:0 auto;       }     .parent ul li{     background:#ffcc66;     float:left;     }
     /*      闭合浮动    */   /* .clearfix:before, .clearfix:after    {          content:"";    display:table;       }
    .clearfix:after{      clear:both;    }
.clearfix{  这个是兼容IE67的记住就好了
*zoom:1;
}
    */      .clearfix:after   {      content:"";   clear:both;   display:block;   visibility:none;   height:0;   }
      </style> </head> <body>         <div class="parent clearfix ">    <ul class="son">     <li>一条咸鱼</li>     <li>一条咸鱼</li>     <li>一条咸鱼</li>     <li>一条咸鱼</li>     <li>一条咸鱼</li>     <li>一条咸鱼</li>    </ul>   </div>   <div class="test">       我是一只小小鸟,怎么飞也飞不高   </div>    </body></html>

总结  四种方法
1.  设置父元素  高度
2.  伪类方式
  2.1  .clearfix:before, .clearfix:after{
  content:"";
  display:table;
}
.clear:after{
  clear:both;
}
.clearfix{
  *zoom:1;
}
2.2

.clearfix:before{
    content:"";
    clear:both;
    display:block;
    visibility:none;
    height:0;
}
.clearfix{
  *zoom:1;
}

3{
父元素设置overflow:hidden
}