关于浮动的半脱离文档流的理解

浮动

　　最基本的浮动方式我们都知道，它是一个半脱离文档流的方式，那么为啥叫做半脱离文档流呢？接下来我们就来以实例来解释一下

　　第一个实例：

.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之后的文字

　　

你会发现，浮动元素它无法覆盖文字，因此得出第三个结论：内联元素是能覆盖浮动元素的。

综上所述：内联 > 浮动 > 块级 

　　因此，浮动元素是处在内联元素和块级元素之间的，所以被叫做半脱离文档流状态