我试图在文本部分下方(在实际页脚之前)获取"学习"div部分，但由于某种原因，当我添加图片(我浮动到文本右侧旁边)时，"学习"div现在位于文本部分的顶部。图像/文本是同一div 容器的一部分。
我能做些什么来纠正这一点吗？
谢谢
.introduction img{
float: right;
}
.introduction p{
width:60%;
text-align:center;
margin:0 auto;
line-height: 30px;
font-size:16px;
padding: 10px;
float: left;
display: block;
}
/********* Footer with links ************/
.footerwrapper {
padding: 10px 20px;
padding-left: 50px;
padding-right: 50px;
background-color: #333;
position: absolute;
}
.contentcontainer {
margin-right: auto;
margin-left: auto;
}
.footitle p {
text-align:left;
color: #EEEEEE;
}
.twocols {
column-count: 2;
column-gap: 5px;
}
.twocolsblock1 .twocolsblock2 {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
width: 31%;
align-items: center;
}
.lessonlinkblurb.footer {
color: #E5E5E5;
font-size: 13px;
line-height: 21px;
cursor: pointer;
text-decoration: none !important;
}<div class="introduction">
<img src="images/Chokwe_People.jpg" alt="Chokwe Language in Africa" width="300" height="300">
<p>
KUCHI is one of the most common words you will hear spoken throughout the Chokwe world. This is the simplest greeting, and is often the first word learned by those who have an interest in the language.
</p>
</div>
<div class="footerwrapper">
<div class="contentcontainer">
<h3 class="footitle">
<p id="learn">Learn Chokwe</p>
<div class="twocols">
<div class="twocolsblock1">
<a href="/greetings.html" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Greetings</div>
<div class="lessonlinkblurb footer">How to greet and some basic phrases in Chokwe</div>
</a>
<a href="/intro.html" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Introductions</div>
<div class="lessonlinkblurb footer">How to introduce yourself and your family in Chokwe</div>
</a>
<a href="/scenarios.html" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Scenarios</div>
<div class="lessonlinkblurb footer">Learn what to say in certain scenarios in Chokwe</div>
</a>
<a href="/timenumbers.html" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Time and time concepts</div>
<div class="lessonlinkblurb footer">How say late, early and days of the week, months of the year in Chokwe</div>
</a>
</div>
<div class="twocolsblock2">
<a href="/learn-italian/question-words" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Question words</div>
<div class="lessonlinkblurb footer">Who? What? When? Where? Why? How? How much? How many? <br>How to ask questions in Chokwe</div>
</a>
<a href="/verbs.html" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Important Verbs</div>
<div class="lessonlinkblurb footer">To be, To Have, To Do, To Say, To Go, To Know, To Want, To Can & To Use. <br> How to use verbs in Chowke</div>
</a>
<a href="/proverbs" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Proverbs</div>
<div class="lessonlinkblurb footer">Learn some important sayings and proverbs in Chokwe</div>
</a>
</div>
</div>
</div>
</div>首先，当您使用样式position: absolute和float时，该元素将从页面的正常流程中删除。这会删除div.introduction img和div.introduction p流，从而使下一个div.footerwrapper元素相对于其父位置向上移动
因此，您可以使用 Manas Khandelwal 的解决方案，通过使用clear它将返回元素之后的元素流float样式
或者，您可以从div.introduction p中删除float: left;，以便它占用div.introduction img留下的空间，也可以从div.footerwrapper中删除position: absolute;，因为它在流中不需要
.introduction img{
float: right;
margin: 10px;
border: 1px solid;
}
.introduction p{
text-align:right;
line-height: 30px;
font-size:16px;
}
/********* Footer with links ************/
.footerwrapper {
padding: 10px 20px;
padding-left: 50px;
padding-right: 50px;
background-color: #333;
}
.contentcontainer {
margin-right: auto;
margin-left: auto;
}
.footitle p {
text-align:left;
color: #EEEEEE;
}
.twocols {
column-count: 2;
column-gap: 5px;
}
.twocolsblock1 .twocolsblock2 {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
width: 31%;
align-items: center;
}
.lessonlinkblurb.footer {
color: #E5E5E5;
font-size: 13px;
line-height: 21px;
cursor: pointer;
text-decoration: none !important;
}<div class="introduction">
<img src="images/Chokwe_People.jpg" alt="Chokwe Language in Africa" width="300" height="100">
<p>
KUCHI is one of the most common words you will hear spoken throughout the Chokwe world. This is the simplest greeting, and is often the first word learned by those who have an interest in the language. KUCHI is one of the most common words you will hear spoken throughout the Chokwe world. This is the simplest greeting, and is often the first word learned by those who have an interest in the language.
</p>
</div>
<div class="footerwrapper">
<div class="contentcontainer">
<h3 class="footitle">
<p id="learn">Learn Chokwe</p>
<div class="twocols">
<div class="twocolsblock1">
<a href="/greetings.html" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Greetings</div>
<div class="lessonlinkblurb footer">How to greet and some basic phrases in Chokwe</div>
</a>
<a href="/intro.html" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Introductions</div>
<div class="lessonlinkblurb footer">How to introduce yourself and your family in Chokwe</div>
</a>
<a href="/scenarios.html" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Scenarios</div>
<div class="lessonlinkblurb footer">Learn what to say in certain scenarios in Chokwe</div>
</a>
<a href="/timenumbers.html" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Time and time concepts</div>
<div class="lessonlinkblurb footer">How say late, early and days of the week, months of the year in Chokwe</div>
</a>
</div>
<div class="twocolsblock2">
<a href="/learn-italian/question-words" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Question words</div>
<div class="lessonlinkblurb footer">Who? What? When? Where? Why? How? How much? How many? <br>How to ask questions in Chokwe</div>
</a>
<a href="/verbs.html" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Important Verbs</div>
<div class="lessonlinkblurb footer">To be, To Have, To Do, To Say, To Go, To Know, To Want, To Can & To Use. <br> How to use verbs in Chowke</div>
</a>
<a href="/proverbs" class="lessonlink w-inline-block">
<div class="lessonlinktitle footer">Proverbs</div>
<div class="lessonlinkblurb footer">Learn some important sayings and proverbs in Chokwe</div>
</a>
</div>
</div>
</div>
</div>*注意：我还从div.introduction.p中删除了width，并在div.introduction img中添加了margin，以便在p和img之间留出一些空间，因为当img使用float: right时，inline element会环绕它
- 从div
.footerwrapper中删除position: absolute;。 - 将任何名称的类添加到div
.introduction并应用这些属性，如下所示
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="introduction clearfix">
代码笔：https://codepen.io/manaskhandelwal1/pen/QWKZoqJ