CSS清除浮动

CSS清除浮动.markdown

CSS清除浮动

CSS清除浮动的办法：clear & clearfix

A Pen by FrankFan on CodePen.

License.

index.html

 <h2>用 clear 清除浮动</h2>
  <div class="demo">
      <div class="fl item1"></div>
      <div class="fl item2"></div>
      <div class="clear"></div>
  </div>
  <h2>用 clearfix 清除浮动</h2>
  <div class="clearfix demo">
      <div class="fl item1"></div>
      <div class="fl item2"></div>
  </div>

style.css

.fl{float:left;}
.demo{background:#ccc;}    .item1{background:#f90;height:100px;width:100px;}
 .item2{background:#fc0;height:200px;width:100px;}


/* 清除浮动 */
.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
    overflow:hidden;
}
.clearfix {
    zoom:1; /* for ie6 & ie7 */
}
.clear {
    clear:both;
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    overflow:hidden;
}