Question

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

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

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

Answer 1

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

它也没有显示与相邻浮动元素的任何连接。

.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>

Answer 2

CSS2规范（https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo）中讨论了它：

否则，如果＆＃39;位置＆＃39;有绝对的价值＆＃39;或者＆＃39;固定＆＃39;，这个盒子绝对是定位，＆＃39;浮动＆＃39;的计算值是＆＃39;无＆＃39;，显示是根据下表设置。盒子的位置将是由顶部＆＃39;，＆＃39;右边＆＃39;底部＆＃39;决定？并且＆＃39;离开＆＃39;属性和包含块的框。

所以结论是当float的值为none时，position被强制设置为absolute。

使用`position：absolute`和`float：left`时的预期行为是什么？

2 个答案: