清除 浮动的方法

CSS

在CSS属性当中使用了float属性的时候,如果没有清除浮动,那么在有浮动元素的父元素的容器,将无法自动撑开.简单点来说,就是,父元素会发生塌陷的情况

codepen地址:

<style>
.A {
     width: 300px;
     border: 1px solid red;
  }
.B {
     background: green;
     margin: 0;
 }
.C {
    background: orange;
 }
.D {
    background: lime;
    border: 2px solid blue;
 }
.B, .C, .D {
    float: left;
}
</style>
<div class="A">
    <div class="B">float left</div>
    <div class="C">float right</div>
    <div class="D">float</div>
</div>

方法1: clear:both 来清除浮动
clear属性是说,所添加的属性,其一定会在浮动元素的下方,具体如下,需要额外添加多一个div占位

###对原html进行修改
<div class="A">
    <div class="B">float left</div>
    <div class="C">float right</div>
    <div class="D">float</div>
    <div class="E>E</div>
</div>
<style>
.E {
    clear: both;
    /*为了不让IE具有一定的空间,就像会出现空白格情况一样,建议加上如下的代码*/
    font-size: 0;
    height: 0;
    line-height: 0;
}
</style>

方法2: 使用 overflow属性来清除浮动
在父级元素上进行 overflow属性的设置,如下

.A {
    overflow: hidden; /* auto 也是可以的 */
    zoom: 1; /*在IE下触发器layout,也可以使用*/
}

方法3: clearfix,即在父级元素上,设置after伪元素来实现清除浮动,实际上也是使用clear属性来进行实现,如下

.A:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.A {
    zoom: 1; /* *+height: 1% */
}

其实只需要写 .A:after就可以实现了,但是只写 .A:after时,在跨浏览器兼容问题会存在一个垂直边距叠加的bug,具体原因可以看看这篇文章 arr instanceof Array 并不总是对的