Почему float: правый, делающий div float влево?

Question

Я новичок в CSS. Я пытаюсь расположить div (#inner) в нижнем правом углу другого div (#container). Я написал float: right;, но при запуске Html я вижу внутренний div в нижней части слева угол контейнера. Почему это? Что не так с кодом?

#container { 
 
    position: relative; 
 
    border: solid; 
 
    width: 70%; 
 
    height: 40%; 
 
} 
 
#inner { 
 
    position: absolute; 
 
    border: solid; 
 
    bottom: 0; 
 
    float: right; 
 
    width: 30%; 
 
    height: 30%; 
 
}

<div id="container"> 
 
    <div id="inner"> 
 
    ABC 
 
    </div> 
 
</div>

Answer 1

Использование float с абсолютным позиционированием на самом деле не имеет смысла. Я думаю, что вы хотите right:0 вместо float:right

#container { 
 
    position: relative; 
 
    border: solid; 
 
    width: 70%; 
 
    height: 40%; 
 
    overflow: auto; 
 
} 
 
#inner { 
 
    position: absolute; 
 
    border: solid; 
 
    bottom: 0; 
 
    right:0; 
 
    width: 30%; 
 
    height: 30%; 
 
} 
 
body, 
 
html { 
 
    height: 100%; 
 
}

<div id="container"> 
 
    <div id="inner"> 
 
    ABC 
 
    </div> 
 
</div>

Answer 2

Просто удалите абсолютное положение. Кроме того, если вы хотите, чтобы контейнер, чтобы обернуть поплавка/с, добавьте «переполнения: авто» для элемента контейнера:

#container { 
 
    position: relative; 
 
    border: solid; 
 
    width: 70%; 
 
    height: 40%; 
 
    overflow: auto; 
 
} 
 
#inner { 
 
    border: solid; 
 
    bottom: 0; 
 
    float: right; 
 
    width: 30%; 
 
    height: 30%; 
 
}

<div id="container"> 
 
    <div id="inner"> 
 
    ABC 
 
    </div> 
 
</div>

Answer 3

вы должны удалить «позицию: абсолютная»