如何清除浮动

我们某些时候发现页面的布局发生了破坏，并且跟我们预想的有些不同。
事实上，它可能是由“浮动属性”引起的。
那么，我们该怎么清除浮动？clearfix是个好方法。
当然我们也会使用float属性。但是，如果使用 float 属性，则元素将处于浮动状态，浮动元素会脱离文档流，导致父元素塌陷。
通过给父元素添加一个指定的 clearfix，我们可以在浮动元素上做了一个类似保护膜的东西，我们利用这个保护膜来防止此类事件的发生。
就比如：下方图片内的三个div标签。

第一种方法

当我想让紫色及灰色在上方，然后将红色块放置下方时，利用float属性时，发生了这样一幕。

.gray{
    background-color: gray;
    width: 200px;
    height: 200px;
    float: left;
}
.purple{
    background-color: purple;
    width: 200px;
    height: 200px;
    float: left;
}
.red{
    background-color: red;
    width: 200px;
    height: 200px;
}

<div class="purple"></div>
<div class="gray"></div>
<div class="red"></div>

嗯？？？ 我的红色块呢？
当打开控制台时，却发现它并没有失踪，只是藏起来了。
那么，就说到了clearfix这个方法。
我们之需要给父元素加上 .clearfix属性。如上方代码般，既然没有父元素，那么就来创建一下。

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.clearfix {
    zoom: 1; /* IE 兼容*/
}
.gray{
    background-color: gray;
    width: 200px;
    height: 200px;
    float: left;
}
.purple{
    background-color: purple;
    width: 200px;
    height: 200px;
    float: left;
}
.red{
    background-color: red;
    width: 200px;
    height: 200px;
}

<div class="clearfix">
    <div class="purple"></div>
    <div class="gray"></div>
</div>
<div class="red"></div>

第二种方法

只需要给父元素添加overflow: hidden;即可