如何在浮动组件下方设置页脚？

Question

我在网络末尾有一个页脚，但在插入了Twitter feed的一页上，它却无法正常工作。页脚遍历Twitter feed，而不是位于其下方。

这是文本和Twitter提要的代码：

<div>   
    <div style="float:left;width:80%;padding-right:20px">
        La Plataforma de Prácticas Externas..
    </div>

    <div style="float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>  
</div>

这是页脚的代码：

<div  align="center" style="position: sticky;width: 100%;bottom: 0%;clear: both;padding-top: 20px;">
    <hr />
    <p class="small">Copyright &copy; <fmt:formatDate value="${date}" pattern="yyyy" /> Footer </b>
</div>

这是结果：

我想要实现的是页脚位于Twitter feed框的下方

编辑：

使用@Sathiraumesh回答，结果是：

我正在寻找的预览是这样的：

Answer 1

从您的应用程序中删除此代码中的postion: absolute

<div style="float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

还要从页脚中删除position: sticky

<div align="center" style="position: sticky;width: 100%;bottom: 0;clear: both;padding-top: 20px;">
        <hr />
        <p class="small">Copyright &copy; <fmt:formatDate value="${date}" pattern="yyyy" /> Footer </b>
    </div>

将Twitter框置于最前面，在Twitter框中添加z-index:3

<div style="z-index:3;float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>