Why is float:right making the div float to the left?

Question

I'm new to CSS. I'm trying to position a div (#inner) in the bottom-right corner of another div (#container). I wrote float: right; but when running the Html I see the inner div in the bottom- left corner of the container. Why is that? What's wrong with the code?

 #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

Using float with absolute positioning doesn't really make sense. I think what you want is right:0 instead of 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

Just remove the absolute position. Also, if you want the container to wrap the float/s, add "overflow: auto" to the container element:

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