清除浮动

清除浮动的方法：父级div定义 伪类:after 和 zoom 

代码如下: <style type="text/css">  .div1{background:#000080;border:1px solid red;}  .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}  .left{float:left;width:20%;height:200px;background:#DDD}  .right{float:right;width:30%;height:80px;background:#DDD}  /*清除浮动代码*/  .clearfloat::after{display:block;clear:both;content:"";}  .clearfloat{zoom:1}  </style>  <div class="div1 clearfloat">  <div class="left">Left</div>  <div class="right">Right</div>  </div>  <div class="div2">  div2  </div> 

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。 建议：推荐使用，建议定义公共类，以减少CSS代码。 

转载于:https://www.cnblogs.com/janney/p/8819700.html

相关资源：浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么