左浮动与右浮动对绝对定位元素有不同的影响？

父盒子开启相对定位，且其中设置了一个子元素为绝对定位，再设置另一个子元素左浮动，却挤开了绝对定位的元素，而设置成右浮动，绝对定位的元素能盖住浮动的元素。（我是从设置绝对定位的元素的层级比浮动的层级高,所以认为左浮动的元素应该也会被绝对定位的元素盖住，而这里就算绝对定位的z-index设置较大时，也还是被左浮动元素挤走

img ）

img

目前只有提醒自己设置了绝对定位后，记得设置初始值来避免这种问题的产生了，具体原因分析不出来。。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            position: relative;
            margin: 100px auto;
            width: 520px;
            height: 280px;
            background-color: pink;
        }

        .box1 .prev {
            width: 200px;
            height: 200px;
            background-color: black;
            float: left;
        }

        .box1 img {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box1">
        <a href="#"><img src="./tb.jpg" alt=""></a>
        <div class="prev"></div>

    </div>
</body>

</html>

你再 .prev 上加一个 z-index:1; 再看看，另外，最主要的是，你的 absolute 元素，并没有设置坐标，在未给定坐标的情况下，默认按照未启用绝对坐标的布局来渲染

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。而图片外面包裹的是a标签，a标签不是块级元素。浮动元素设置了宽度。综合这几个元素，就好理解了。 不过自从了解了flex和grid布局之后，float已经很少用了。