0.父元素是绝对定位，子元素可以浮动
<style> .Box{ position: absolute; height: 800px; width: 800px; top:20px; right: 10%; border: red 1px solid; } .box1{ width: 100px; height: 100px; border: 1px blue solid; float: right; position: relative; } </style> <body> <div class="Box"> <div class="box1"></div> </div> </body>
2.父元素可以绝对定位，盒子flex模型一起用，子元素也可以用绝对定位
<style> .Box{ position: absolute; display: flex; height: 800px; width: 800px; top:20px; right: 10%; border: red 1px solid; } .box1{ width: 100px; height: 100px; border: 1px blue solid; position: absolute; right: 10%; } </style> <body> <div class="Box"> <div class="box1"></div> </div> </body>
2.父元素绝对定位且是盒子flex模型，子元素浮动失去效果
.Box{
display: flex;
position: absolute;
height: 800px;
width: 800px;
top:20px;
right: 10%;
border: red 1px solid;
}
.box1{
width: 100px;
height: 100px;
border: 1px blue solid;
float: right;
right: 10%;
}
</style>
<body>
<div class="Box">
<div class="box1"></div>
</div>
</body>
4.父元素绝对定位，外边距可以用，子元素外边距也可以用（父元素绝对定位，里面的元素还是按正常文档流元素显示）
.Box{
position: absolute;
/* display: flex; */
height: 800px;
width: 800px;
top:20px;
right: 10%;
border: red 1px solid;
padding-top: 30px;
}
.box1{
width: 100px;
height: 100px;
border: 1px blue solid;
margin: 10px;
}
.box2{
width: 100px;
height: 100px;
border: 1px rgb(42, 165, 63) solid;
margin: 10px;
}
5.父元素绝对定位且是flex模型，那么块级元素就有了浮动效果（所以此时float就没了它的意义，所以float不起效果）：
.Box{
position: absolute;
display: flex;
height: 800px;
width: 800px;
top:20px;
right: 10%;
border: red 1px solid;
padding-top: 30px;
}
.box1{
width: 100px;
height: 100px;
border: 1px blue solid;
margin: 10px;
}
.box2{
width: 100px;
height: 100px;
border: 1px rgb(42, 165, 63) solid;
margin: 10px;
}
6.父元素是绝对定位，且是盒子flex模型；那么子元素如果也是绝对定位，那么子元素将失去盒子模型的性质（即脱离文档流）
第一次记录总结：
1.绝对定位是会脱离文档流的，flex模型属于正常文档流；
2.父元素是felx模型，那么子元素的float属性失效，因为flex模型本来就是用来浮动的，功能比float更强大，所以没有必要保留float属性；
3.兄弟元素如果都是绝对定位，那么margin属性会失效
4.父元素如果是flex模型，子元素是绝对定位，那么flex模型失效，因为flex属性是正常文档流的属性；
再次总结：父元素如果是绝对定位，那么里面的元素还是按正常元素属性显示。flex模型里面的子元素无法用float属性，因为flex属性本来就有浮动。绝对定位和flex属性可以一起用，可以创建一个脱离文档流的flex模型。
.Box{
position: absolute;
display: flex;
height: 800px;
width: 800px;
top:20px;
right: 10%;
border: red 1px solid;
padding-top: 30px;
}
.box1{
width: 100px;
height: 100px;
border: 1px blue solid;
margin: 10px;
}
.box2{
width: 100px;
height: 100px;
border: 1px rgb(42, 165, 63) solid;
float: right;
right: 10%;
margin: 10px;
}
</style>
<body>
<div class="Box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>