Css（2）绝对定位、浮动、flex盒子、相对定位、之间的关系，持续更新

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>

穷则独善其身，达则兼济天下……