浮動會致使什麼結果?怎麼清除浮動?

首先看一段代碼:

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