为什么float：right使div向左浮动？

Question

我是CSS的新手。 我正在尝试将div（#inner）放置在另一个div（#container）的右下角。 我写了float: right; 但在运行HTML时我看到容器的左下角内股利。 这是为什么？ 代码有什么问题？

 #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

只需删除绝对位置即可。 另外，如果您希望容器包装float / s，请在容器元素中添加“ overflow：auto”：

 #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

您必须删除“ position：absolute”