为什么浮动：正确使div浮动到左边？

Question

我是CSS的新手。我试图在另一个div（#container）的右下角放置一个div（#inner）。 我写了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

删除绝对位置。此外，如果您希望容器包装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

你必须删除＆＃34; position：absolute＆＃34;