Каково ожидаемое поведение, когда используются как `position: absolute`, так и` float: left`?

Question

Использование position: absolute и float:left вместе выглядит немного запутанным и даже абсурдной, потому что position: absolute не будет влиять на позицию двойников элементов в то время как float:left будет влиять на положение двойников флоат элементов.

Однако использование их в CSS допускается, поэтому каково ожидаемое поведение? Я не совсем уверен, что произойдет, когда оба они будут использованы, поскольку они не описаны в документе MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/float).

У кого-нибудь есть идеи по этому поводу? Благодаря!

Answer 1

Это обсуждается в спецификации CSS2 (https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo):

В противном случае, если 'позиции' имеет значение 'абсолютного' или 'фиксированные', коробка абсолютно , вычисленное значение «float» равно «none», а отображение установлено в соответствии с приведенной ниже таблицей. Позиция поля будет , определяемая свойствами «сверху», «справа», «снизу» и «слева» и блока, содержащего блок.

Поэтому вывод, что float установлен в none навязчиво, когда position имеет значение absolute.

Answer 2

Добавление 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>