javascript - 将内部 div 移动到外部父 div 的右下角

Question

我希望我的内部 div 位于外部 div 的右下角，方法是使用 float: right，但由于某些原因，它会留在左下角。我做错了什么？

#outer {
width:100%;
height:20%;
border: 1px solid black;	
position: absolute;		
}	
#inner {
width: 50px
height: 50px;
border: 1px solid red;
position: absolute;
float: right;		
bottom: 0;		
}

<div id = 'outer'>
<div id = 'inner'>
bottom-right corner;	
</div>	
</div>

Answer 1

改为添加 right: 0。

如果元素是绝对定位的，则 float 元素不会对其产生任何影响。

#outer {
  width: 100%;
  height: 20%;
  border: 1px solid black;
  position: absolute;
}
#inner {
  width: 50px height: 50px;
  border: 1px solid red;
  position: absolute;
  bottom: 0;
  right: 0;
}

<div id='outer'>
  <div id='inner'>
    bottom-right corner;
  </div>
</div>