position:fixed/absolute和float的关系:
元素设置position:absolute / fixed后，float属性是没有效果的。
对于position: absolute元素，其包含元素为设有position:relative的元素；
对于position: fixed元素，其包含元素为HTML，而HTML视为窗口大小，如果html的范围大于body，可设置html最大宽度值，并body设置transform: translateX(0)属性，则fixed元素可位于body内显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
<title>Title</title>
<style>
html {
position: relative;
height: 100%;
max-width: 540px;
margin: 0 auto;
background: #eee;
}
body {
width: 100%;height: 100%;
margin: 0 auto;
background: #fff;
transform: translateX(0);
}
.parentBox {
position: relative;
width: 300px;height: 150px;
border: 1px dotted #000;
}
.childBox {
position: fixed;
float: left;
top: 0;
right: 0;
width: 100px;
height: 100px;
border: 1px solid #fc0;
}
.childBox2 {
position: absolute;
}
</style>
</head>
<body>
<div class="parentBox">
<span>relative</span>
<div class="childBox">fixed</div>
<div class="childBox childBox2">absolute</div>
</div>
</body>
</html>