html - 同时使用 `position: absolute` 和 `float: left` 时的预期行为是什么？

Question

同时使用position: absolute 和float:left 看起来有点困惑甚至荒谬，因为position: absolute 不会影响兄弟元素的位置，而 float:left 将影响兄弟 float 元素的位置。

但是，在 CSS 中允许将它们一起使用，那么预期的行为是什么？我不太确定同时使用它们时会发生什么，因为 MDN 文档 ( https://developer.mozilla.org/en-US/docs/Web/CSS/float) 中没有描述。

有没有人对此有任何想法？谢谢!

Answer 1

将 float:left; 添加到 absolute 定位元素显然不会添加元素的任何行为更改。大多数 display 属性也是如此。例如，添加 display:inline; 不会导致尺寸丢失。

它也没有显示与相邻 float 元素的任何联系。

.box{
  border: 1px solid red;
  float: left;
  height: 100px;
  width: 100px;  
}
.box1{
  border: 1px solid green;
  height: 100px;
  width: 100px;
  position: absolute;
  display: table;
}

<div class="box"></div>
  <div class="box1"></div>

但是当相邻元素的float去掉后，绝对定位元素就定位在它的下方。

.box{
  border: 1px solid red;
  height: 100px;
  width: 100px;  
}
.box1{
  border: 1px solid green;
  height: 100px;
  width: 100px;
  position: absolute;
  display: table;
}

<div class="box"></div>
  <div class="box1"></div>