清除浮动

关于浮动

设置为浮动的元素会脱离当前文档流，向左或向右移动直到边缘遇到另一个浮动元素或者到达边界。普通元素不会对其造成影响。

浮动是把双刃剑，在给我们的布局带来便利的同时有一些缺点需要我们去解决。例如最常见的父元素塌陷。如下图所示：

.warper{
    width: 200px;
    border:1px solid  #ff6633;
}
.float-1{
    float: left;
    background:  rgb(5, 5, 5);
    height: 100px;
    width: 100px;
}
.float-2{
    float: left;
    background: #ff0;
    height: 50px;
    width: 100px;
}
//html  
<div class='warper'>
    <div class="float-1"></div>
    <div class="float-2"></div>
</div>

可以看出warper没有被撑开，这个时候就需要清除浮动了。

清除浮动的方式有：

使用clear属性

1. 结尾空元素或者after等伪元素或者br 来clear

使用BFC

1. 父元素同样浮动
2. 父元素设置overflow为hidden或者auto
3. 父元素display：table

clear的方式

.warper:after {
    content: '';
    height: 0;
    display: block;
    clear: both;
}

BFC

块级格式化上下文：BFC(block formatting contexts)

BFC特性

1. 块级格式化上下文会阻止外边距叠加
2. 块级格式化上下文不会重叠浮动元素
3. 块级格式化上下文通常可以包含浮动

BFC触发的条件

float 除了none以外的值 
 
overflow 除了visible 以外的值（hidden，auto，scroll ） 
 
display (table-cell，table-caption，inline-block) 
 
position（absolute，fixed） 
 
fieldset元素

触发具体方式：

 .warper{
    width: 200px;
    border:1px solid  #ff6633;
    // 下面属性任选其一
    overflow: hidden;
    overflow: auto;
    float: left;
    display:inline-block;
    position: fixed;
}