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

我是新来的CSS。我试图在另一个div（#container）的右下角放置div（#inner）。我写了float: right;但是当运行Html时，我看到底部的左边的的内部div容器的角落。这是为什么？代码有什么问题？为什么浮动：使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>

来源

2017-01-17 cookya

使用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>

来源

2017-01-17 15:46:49 j08691

这里是关于定位的一些有用的文档，你应该看看。 http://www.barelyfitz.com/screencast/html-training/css/positioning/ –

This works。但是，你能否解释为什么在使用position：absolute时为什么使用float没有意义？ – cookya

第二个答案在http://stackoverflow.com/questions/11333624/float-right-and-position-absolute-doesnt-work-共同揭示了为什么 – j08691

只是删除的绝对位置。另外，如果你想在容器来包装浮法/秒，加上“溢出：汽车”的容器元素：

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

来源

2017-01-17 15:48:59 Johannes

不幸的是，这个解决方案的内部div在右上角在这种情况下，不在右下角 – cookya

中，根本不使用浮点数，而只使用绝对位置。 – Johannes

你必须删除“的立场：绝对”

来源

2017-01-17 16:01:43 Marco

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

回答

相关问题