浮动会导致什么结果?怎么清除浮动?

首先看一段代码:

HTML:

<div class="container">
    <div id="div1"></div>
    <!--<div id="div2"></div>-->
</div>

CSS:

.container, #div1, #div2 {
    border: 1px solid;
}

.container {
    width: 100%;
}

#div1 {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blueviolet;
}

原本想象的效果是这样子:

结果是这个样子:

为什么div.container的高度为0了呢?是因为float导致的高度折叠，即元素的上下底边重合，也就是出现高度为0的情况.这种情况为导致以下结果:

因为#div1浮动,脱离文档流导致div.container高度为0,这时在div.container后面添加一个div.box自然是在div.container下面.但由于div.container的高度为0,所以出现的效果是#div1会覆盖div.box.

但怎么解决这个问题呢,第一种方法可以是这样:

CSS:

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

给div.container添加伪元素,让其清除左右浮动,便可解决这个问题,效果如下:

第二种方法可以给div.container添加overflow: hidden;

CSS:

.container {
    width: 100%;
    overflow: hidden;
}

为什么overflow: hidden可以清除浮动呢?其实是我们添加overflow时创建了BFC(块级格式化上下文).
一个BFC可以被显示触发,只需满足一下条件之一:

1.float 的值不为 none;
2.overflow 的值不为 visible;
3.position 的值为 fixed/absolute;
4.display 的值为 table-cell/table-caption/inline-block/flex/inline-flex.

在计算BFC高度时,浮动元素高度也参与计算,因此div.container在计算高度时也把#div1的高度计算在内,因此会出现这种"清除浮动"的效果,把#div1包含在内.