将内部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。

如果元素位于绝对位置，则浮动元素对它没有任何影响。

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

Answer 2

更改外部div的css属性，如下所示：

#inner {
     width: 50px
     height: 50px;
     border: 1px solid red;
     position: absolute;
     bottom: 0; 
     right:0
}