css清除浮动的float的三种方法

不能清除positioin:absolute的浮动

参考链接

html:

<div class="outer">
   <div class="box"></div>
   <div class="box box1"></div>
   <div class="box box2"></div>
</div>

scss:

.outer{
    border: 1px solid red;
    margin-top: 6.25em;
    .box{
      float: left;
      width: 100px;
      height: 100px;
      background: orange;
    }
    .box1{
      background: green;
    }
    .box2{
      background: blue;
    }
  }

显示效果:

解决方法1

在父亲div添加:after。

利用:after和:before在元素内插入两个元素块，从而达到清除浮动的效果。其实现的原理类似于clear: both方法。

.out:after{
  display: block;
  content: '';
  width: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

解决方法2

父亲div.outer的css添加: overflow: auto; 或者overflow: auto;。最好使用overflow: auto;。对seo比较友好。

.outer{
  overflow: auto;
  zoom: 1;
}

其中zoom: 1是在处理兼容问题。

解决方法3

在父亲div下添加新的元素，使用clear:both;。

html:

<div class="outer">
   <div class="box"></div>
   <div class="box box1"></div>
   <div class="box box2"></div>
   <div class="clear"></div>
</div>

css:

.clear{
  width: 0;
  height: 0;
  clear: both;
}

最后结果: