前端学习系列——（六）清除浮动

确切的说是清除浮动造成的影响，但是清除浮动这个说法一传十、十传百，就将错就错，都这么说了。为子元素设置浮动效果后，会导致父元素的高度坍塌。什么意思呢，就如下面的图所示。

.parentBox{
    width: 300px;
    margin: 0 auto;
    border: 10px solid #f00;
}
.childBox{
    width: 200px;
    height: 200px;
    background-color: #0f0;
    float: left;
}

<div class="parentBox">
    <div class="childBox"></div>
</div>

可以看到父元素高度坍塌为0，而没有随着子元素的高度撑开高度。这就是浮动造成的影响，下面就是告诉大家怎么清楚浮动造成的影响。

一、使用clear属性清除浮动

（1）使用<div>标签（在最后添加空白块级标签）

.parentBox{
    width: 300px;
    margin: 0 auto;
    border: 10px solid #f00;
}
.childBox{
    width: 200px;
    height: 200px;
    background-color: #0f0;
    float: left;
}
.clear{
    height: 0;
    font-size: 0;
    clear: both;
}

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

总结：添加额外无意义标签，不利于SEO，且代码看上去冗余。

（2）使用<br>标签（br标签自带clear属性）

.parentBox{
    width: 300px;
    margin: 0 auto;
    border: 10px solid #f00;
}
.childBox{
    width: 200px;
    height: 200px;
    background-color: #0f0;
    float: left;
}

<div class="parentBox">
    <div class="childBox"></div>
    <br clear="all">
</div>

总结：效果同上，不累述，且缺点同上。

（3）使用伪元素选择器::after和zoom:1（父元素设置该样式，推荐使用）

.parentBox{
    width: 300px;
    margin: 0 auto;
    border: 10px solid #f00;
}
.childBox{
    width: 200px;
    height: 200px;
    background-color: #0f0;
    float: left;
}

.clear{
    zoom: 1;
}
.clear::after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}

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

二、使用overflow样式（父元素设置该样式，其中overflow设置为auto或hidden都可以）

.parentBox{
    width: 300px;
    margin: 0 auto;
    border: 10px solid #f00;
    overflow: hidden;
}
.childBox{
    width: 200px;
    height: 200px;
    background-color: #0f0;
    float: left;
}

<div class="parentBox">
    <div class="childBox"></div>
</div>

三、使用display设置为行块级元素

.parentBox{
    width: 300px;
    margin: 0 auto;
    border: 10px solid #f00;
    display: inline-block;
}
.childBox{
    width: 200px;
    height: 200px;
    background-color: #0f0;
    float: left;
}

<div class="parentBox">
    <div class="childBox"></div>
</div>

四、设置父级元素浮动（极其不推荐）

.parentBox{
    width: 300px;
    margin: 0 auto;
    border: 10px solid #f00;
    float: left;
}
.childBox{
    width: 200px;
    height: 200px;
    background-color: #0f0;
    float: left;
}

<div class="parentBox">
    <div class="childBox"></div>
</div>

这种方法不能根本解决问题，需要一直设置到<body>标签，不切实际。

前端学习系列——（六）清除浮动

猜你喜欢