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

首先看一段代码:

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包含在内.