css如何在不脱离文档流的情况下使图片置于页面底部

可以使用CSS的flex布局来实现。具体步骤如下：

1. 给页面的父元素添加flex布局，可以设置为flex或者inline-flex。

2. 给父元素设置高度，在这个高度内进行排列。

3. 将要置于底部的图片元素放在父元素的最后一个子元素。

4. 给父元素设置justify-content为flex-end，这样子元素就会靠近底部。

下面是一个简单的示例代码：

<div class="container">
  <div class="content">这是页面主要内容</div>
  <img class="bottom-img" src="xxx.jpg" alt="底部图片">
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置父元素高度为视口高度 */
  justify-content: flex-end; /* 将子元素靠近底部 */
}

.content {
  flex: 1; /* 设置内容元素占据剩余空间 */
}

.bottom-img {
  width: 100%;
  height: auto;
}
</style>

这样就可以实现在不脱离文档流的情况下将图片置于页面底部。