一. CSS浮動
先看一個例子
<html !DOCTYPE>
<head>
<title>HTML2</title>
<style>
.div-outer {
border: solid 2px #223344;
}
.div1 {
width: 200px;
height: 100px;
border: solid 2px #667788;
}
.div2 {
width: 200px;
height: 100px;
border: solid 2px #667788;
}
.div3 {
width: 200px;
height: 100px;
border: solid 2px #667788;
}
</style>
</head>
<body>
<div class="div-outer">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>頁面如圖所示
在div-outer內部的三個div默認每個div會佔一行，所以三個div會成列顯示。
現在對div1設置float: left，頁面如圖所示
可以看到div2和div3重合了。
對div1設置float: left屬性，div1脫離文檔流，但是仍佔據位置，div2和div3重合是因爲div2位置不變，div3也在div2的位置。但是發現這樣理解是不對的，正確的理解是div2被div1擠到了現在div3的位置。
因爲如果對div1設置float: right，頁面如圖所示
所以如果對div1設置float: left時，div2會被div1擠到現在div3的位置。
二. CSS浮動塌陷
如果對div1，div2，div3都設置float: left，但是父元素div-outer沒有設置寬度和高度，頁面如圖所示
如果沒有設置父元素高度，父元素的高度默認是auto，會隨子元素的高度而改變，如果對div1，div2，div3都設置float: left，那麼此時父元素高度爲0，這就是浮動塌陷。
三. 解決方法
1. 添加一個新的div
在div3下面添加一個寬度爲0，高度爲0，並且設置clear: both屬性的空div。
.div4 {
clear: both;
}
<div class="div4"></div>頁面如圖所示
父元素的高度可以顯示了。
2. 設置父元素屬性
對父元素設置屬性overflow: hidden或overflow: auto，
.div-outer {
border: solid 2px #223344;
overflow: hidden;
}設置overflow: hidden的意思是，overflow規定當內容溢出元素框時發生的事情，
因爲父元素沒有指定高度，默認是auto，所以需要計算父元素包含的內容的高度，這樣子元素浮動的高度就被計算進去，解決了浮動塌陷。
頁面如圖所示，
或者對父元素設置屬性display: table，
.div-outer {
border: solid 2px #223344;
display: table;設置display: table的意思是，使父元素形成了BFC(Block Form Content)，
BFC有三個特性：
- 防止上下margin重疊
- 防止浮動元素重疊
- 防止浮動塌陷
overflow: hidden也形成了BFC，BFC會將子元素的浮動高度計算進去，解決浮動塌陷。
頁面如圖所示，
不同之處在於設置屬性overflow: hidden，父元素寬度會是100%，而設置屬性display: table，父元素的寬度會隨子元素變化，。
3. 內牆法
在父元素後面使用僞元素:after，
.div-outer:after{
display: block;
content: "";
height: 0;
clear: both;
}這種方法的作用和第一種方法是相同的，只不過沒有在div3後面再添加一個空的div，因爲添加div會影響性能。
display: block;
content: "";
height: 0;這就類似添加了一個空的div，然後設置屬性clear: both。
總之，清除浮動塌陷就是對父元素設置屬性使其形成BFC（第二種方法），或者添加一個空的div（第一種方法和第三種方法）。