Html 展开容器时将div向右对齐

下面的标记扩展了container div（它有一个我想显示的背景图像），但对齐了左侧的框：

HTML:

如果我使用

float:right

或

position:absolute；右：0px
有没有一种方法可以将盒子与屏幕右侧对齐，同时让容器展开以适应？感谢阅读。
使用浮动时，您需要为容器使用clearfix：

.container:after {
   content: "";
   display: table;
   clear: both;
}

然后让盒子像你一样浮起来：）

这是为了强制容器识别浮动内容。
clearfix是一种元素自动清除其子元素的方法，这样您就不需要添加额外的标记。它通常用于浮动布局

例如：

此方法将有助于支持IE 8及以上浏览器和所有现代浏览器

如果您不需要IE8支持，因为旧浏览器不支持空内容，您可以使用：

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

浮动：右
；在该框上，只需在容器上添加
overflow:auto

下面的示例将边框添加到框中以实现可见性：
.container{
背景图像：url（'http://www.placehold.it/100x100');
宽度：100%；
溢出：自动；
}
.盒子{
宽度：100px；
高度：100px；
边框：1px纯红；
浮动：对；
}

此外，我认为OP希望将图像拉伸为容器宽度，因此也将图像设置为100%。这就成功了。谢谢这是现代浏览器普遍支持的吗？
.container:after {
   content: "";
   display: table;
   clear: both;
}

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}