css绝对定位浮动 |> css 不兼容

1. 绝对定位
绝对定位就是将元素摆放在页面上的一个具体位置，不受其他元素影响。它可以根据元素本身来指定 left 和 top 等属性值，以确定所处位置。
例如，下面这个例子中，大家通过CSS实现了一个绝对定位的盒子：
<style>
.box {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
background: #333;
}
</style>
<div class="box"></div>
2. 浮动
浮动就是让元素脱离文档流并且向左或向右移动，直到它遇到另一个浮动元素或页面边缘。这个技术常用于实现多个元素的排列或者文字环绕图片等效果。
例如，下面这个例子中，大家通过CSS实现了一个浮动的图片：
<style>
.img {
float: left;
margin-right: 10px;
width: 200px;
height: 200px;
background: url(XXX.jpg) no-repeat;
}
</style>
<div class="img"></div>
<p>这是一段文字</p>
3. 绝对定位浮动
将绝对定位和浮动技术结合起来，可以实现更加丰富的效果。
例如，下面这个例子中，大家通过CSS实现了一个绝对定位和浮动结合的效果：
<style>
.box {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: url(XXX.jpg) no-repeat;
background-size: cover;
float: left;
margin-right: 10px;
}
</style>
<div class="box">
<div class="img"></div>
</div>
4. 总结
绝对定位浮动技术在WEB页面布局中是非常重要的一环，通过它大家可以实现各种丰富的效果。同时，使用这个技术也需要注意一些问题，比如页面兼容性、元素大小等。