清除浮动的四种方式

为什么需要清除浮动？

一般是元素浮动之后，导致父级对象盒子不能被撑开，这样浮动就产生了。

浮动不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局

 

demo:

<style>
.box{
    margin: 50px auto;
    border: 1px solid #ccc;
    background: yellow;
    color: #fff;
}
 
.red{
    width: 80px;
    height: 100px;
    background: red;
    float: left;
}
.green{
    width: 80px;
    height: 100px;
    background: green;
    float: left;
}

.blue{
    width: 80px;
    height: 100px;
    background: blue;
    float: left;
}
.clear{
    clear: both;
}
</style>

<div class="box">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
</div>

 

清除浮动的方法：

1.父元素内最后添加元素clear    clear:both

html:

<div class="clear"></div>

<style>
.clear{
    clear: both;
}
</style>

 

2.父元素添加属性 overflow:auto

.box{
　　overflow: auto;
}

3.父元素使用伪类元素清除float

.box:after{
　　display: block;
       overflow: hidden;
       clear: both;
       content:""
}
.box{
　　　zoom： -1；/* 解决兼容问题*/
}

4.使用双伪类before和after

box:before,.box:after{
    display: block;
    clear: both;
    content: ''
}

.box { zoom: 1; }