关于浮动的半脱离文档流的理解
浮动
最基本的浮动方式我们都知道,它是一个半脱离文档流的方式,那么为啥叫做半脱离文档流呢?接下来我们就来以实例来解释一下
第一个实例:
.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之后的文字
你会发现,浮动元素它无法覆盖文字,因此得出第三个结论:内联元素是能覆盖浮动元素的。
综上所述:内联 > 浮动 > 块级
因此,浮动元素是处在内联元素和块级元素之间的,所以被叫做半脱离文档流状态