div 部分一直在其他 div 部分之上，不知道为什么

Question

我试图在文本部分下方（在实际页脚之前）获取“学习”div 部分，但出于某种原因，当我添加图片（我将其浮动到文本右侧），“学习”div 现在位于文本部分的顶部。 image/text 是同一 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>

Answer 1

从 div .footerwrapper 中删除 position: absolute;。
将任意名称的 class 添加到 .introduction div 并应用这些属性，如下所示

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

<div class="introduction clearfix">

代码笔：https://codepen.io/manaskhandelwal1/pen/QWKZoqJ

Answer 2

首先，当您使用 position: absolute 和 float 样式时，该元素将从页面的正常流中移除。这会使您的 div.introduction img 和 div.introduction p 流被删除，从而使下一个元素 div.footerwrapper 相对于其父位置

向上移动

因此您可以通过使用 clear 使用中的解决方案，这将 return 元素在具有 float 样式的元素之后的流动

或者您可以从 div.introduction p 中删除 float: left;，这样它将占用 div.introduction img 留下的 space，同时删除 position: absolute;来自 div.footerwrapper 因为流程中不需要它

.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 并将 margin 添加到 div.introduction img 以在 [=28= 之间添加一些 space ] 和 img，因为当 img 使用 float: right 时， inline element 会环绕它

div 部分一直在其他 div 部分之上，不知道为什么

div section persistently on top of other div section, not sure why

html

css

divide