文本是堆叠在自身之上

Question

我的introtext div中有一个奇怪的问题我有一些带有文本的p标签，我有一些跨度可以给某些单词突出显示颜色。

然而，现在我的文字在字面上相互依赖，任何人都知道是什么导致了这个？

＆＃13;

＆＃13;

.wrapper {
  width: 100%;
  position: relative;
  float: left;
  height: auto;
}
.bluetxt {
  color: #0084FF;
  float: left;
  position: relative;
  float: left;
}
#introheader {
  position: relative;
  float: left;
  font-family: alternate;
  font-size: 1.0vw;
  margin-top: 5%;
  font-weight: 800;
}
#introtxt {
  font-family: alternate;
  font-size: 0.7vw;
  margin-top: 4%;
  position: relative;
  float: left;
  width: 80%;
  text-align: left;
}

＆＃13;

<div class="wrapper">
  <p id="introheader"><span class="bluetxt">LEO CLUB DE 4 AMBACHTEN</span>
  </p>
  <p id="introtxt"><span class="bluetxt">Leo club de 4 ambachten</span> is een servicevereniging of serviceclub voor enthousiaste jongvolwassenen (18-33) uit de regio Gent-Zelzate (BE) en Zeeuws-Vlaanderen (NL). De leden organiseren <span class="bluetxt">fundraisers</span> en
    ondersteunen met de opbrengst daarvan <span class="bluetxt">sociale projecten</span>. Op die manier krijgen de leden de kans om zichzelf te ontplooien en belangrijke vaardigheden te ontwikkelen.
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

此处不需要浮动和定位（至少在给定代码的上下文中）。移除loat: left;和position: relative;，p代码将正常运行。

要使p标签不再重叠，请指定行高，例如line-height: 12pt;。也许他们从一位父母那里继承了line-height:0。

旁注：vw中的字体大小非常不寻常。最好以px或pt提供，并使用media queries使字体大小响应。

.wrapper {
  width: 100%;
  height: auto;
}
.bluetxt {
  color: #0084FF;
}
#introheader {
  font-family: alternate;
  font-size: 12pt;
  margin-top: 5%;
  font-weight: 800;
}
#introtxt {
  font-family: alternate;
  font-size: 10pt;
  margin-top: 4%;
  width: 80%;
  text-align: left;
}

<div class="wrapper">
  <p id="introheader"><span class="bluetxt">LEO CLUB DE 4 AMBACHTEN</span>
  </p>
  <p id="introtxt"><span class="bluetxt">Leo club de 4 ambachten</span> is een servicevereniging of serviceclub voor enthousiaste jongvolwassenen (18-33) uit de regio Gent-Zelzate (BE) en Zeeuws-Vlaanderen (NL). De leden organiseren <span class="bluetxt">fundraisers</span> en
    ondersteunen met de opbrengst daarvan <span class="bluetxt">sociale projecten</span>. Op die manier krijgen de leden de kans om zichzelf te ontplooien en belangrijke vaardigheden te ontwikkelen.
  </p>
</div>