浮动会造成什么样的后果?怎么清除浮动?

首先看一段代码:

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的情况.这种情况为导致以下结果: