【Css】position:absolute和float的层级和定位 inline-block relative

<!DOCTYPE HTML>
<html>
<body>

/*设置为float后，float的下面的口会打开，浮动起来，下一行的会塞到float的里面去，但是上面的口是关闭的，float上面是div的话，float是漂不上去的*/
<div style="background-color:red;width:100px;height:100px;"></div>
<div style="background-color:#eee;width:100px;height:100px;float:right;"></div>
<div style="background-color:#000;width:100px;height:100px;"></div>
<div style="background-color:pink;width:100px;height:100px;position:absolute;"></div> 
/*
如果没写定位在哪里。absolute是默认在文档流下面的
<div style="background-color:pink;width:100px;height:100px;position:absolute;"></div>
如果写了，则下面语句覆盖第一个红色块
<div style="background-color:pink;width:100px;height:100px;position:absolute;top:1px;left:1px"></div> 
和float的层级关系,会覆盖float的，因为完全脱离了文档流，而float只是半脱离
<div style="background-color:pink;width:100px;height:100px;position:absolute;top:100px;right:1px"></div> 
*/
</body>
</html>

2.relative：原来的文档流还是存在的，只是相对原来的文档流做了移位

3.我们有个时候既希望元素具有宽度高度特性，又具有同行特性，这个时候我们可以使用inline-block

4.absolute和float

两者都会使元素脱离文档流，但是，与absolute不同的是：
float 的元素还会在文档流上占据一个位置。

从上面的效果中可以看出：

文字会围绕float的元素，所以float的元素在文档流还是占有有一席之位的。
文字被absolute的元素遮挡了，说明absolute的元素已经完全脱离文档流，文字可以无视它的存在。

5.清除浮动（把float元素下面的口子封上，下面的div就不会被隐藏进float里了）

<html>
<body>

<div style="float:left;height:100px;width:200px;background-color:#eee"></div>
<div style="clear:left;height:100px;width:200px;background-color:pink"></div>
<div></div>

</body>
</html>