關於浮動的半脫離文檔流的理解

浮動

　　最基本的浮動方式我們都知道，它是一個半脫離文檔流的方式，那么為啥叫做半脫離文檔流呢？接下來我們就來以實例來解釋一下

　　第一個實例：

.box1{
　　width: 100px;
　　height: 100px;
　　background-color: pink;
}
<div class="box1">這是第一個div</div>

　　

　　答案，不用解釋，都懂，但從這點咱們是否能得出一個結論，在沒有其它情況下，行內元素是覆蓋塊級元素的。

第二個實例

　　

.box1{
　　float: left;
　　width: 100px;
　　height: 100px;
　　background-color: pink;
}
.box2{            
　　width: 100px;
　　height: 100px;
　　background-color: blue;
}
<div class="box1">這是第一個div</div>
<div class="box2">這是第二個div</div>

　　答案：和上面第一個一樣，因為第一個用了浮動，脫離了文檔流，使第二個div頂上去了，而浮動的元素將第二個div給覆蓋了。

　　　　這里，我們得出第二個結論：浮動元素也是覆蓋塊級元素的。

第三個實例

.box1{
    float: left;
    width: 100px;
     height: 100px;
    background-color: pink;
}
div之前的文字<div class="box1">這是第一個div</div>div之后的文字

　　

你會發現，浮動元素它無法覆蓋文字，因此得出第三個結論：內聯元素是能覆蓋浮動元素的。

綜上所述：內聯 > 浮動 > 塊級 

　　因此，浮動元素是處在內聯元素和塊級元素之間的，所以被叫做半脫離文檔流狀態