html - div 入侵其他 div 空间？

Question

我不知道这里发生了什么。我有一个 div，上面有两个文本。下面还有另一个 div - 其作用类似于按钮。由于某种原因，这种情况正在发生......

这是代码...

<div id="container1" style="margin:auto;text-align:center;width:85%;">

  <span style="font-family:'Montserrat';color:white;font-size:55px;">PROFESSORES</span>

  <br>

  <p class="text" style="float:left;text-align:right;color:white;"><span style="font-weight:bold;">Xxxx Xxxxx Xxxxxx</span>
    <br>&eacute; formada em psicologia e
    <br>especializada em ensino da
    <br>l&iacute;ngua inglesa, ambos pela
    <br>XXXX; morou na Xxxxxxx por
    <br>X anos, participou de v&aacute;rios
    <br>cursos na &aacute;rea de artes e
    <br>educa&ccedil;&atilde;o, culin&aacute;ria,
    <br>taichichuan, xxxxxxx,
    <br>t&eacute;cnicas de meditaç&atilde;o e hoje
    <br>é professora e coordenadora
    <br>de ensino da Xxxxxxxx.</p>

  <p class="text" style="float:right;text-align:left;color:white;"><span style="font-weight:bold;">Xxxxxxx Xxxxx Xxxx</span>
    <br>é professora e tradutora de
    <br>espanhol e português, pós
    <br>graduanda em Gramática da
    <br>Língua Portuguesa pela XXXX,
    <br>cursos de formação para
    <br>professores de língua e formada
    <br>em Comunicação Social.
    <br>Amante do espanhol, não só
    <br>porque é a sua língua materna,
    <br>mas também porque adora
    <br>ensinar e compartilhar não só a
    <br>gramática como também
    <br>curiosidades, experiências,
    <br>cultura latino-americano e
    <br>espanhola, filmes, costumes,
    <br>expressões e receitas típicas.</p>

</div>

<br>

<div class="button">

  <span class="label">+ METODOLOGIA</span>

</div>

这是“button”类的 CSS 代码...如您所见，显然没有任何内容可以干扰另一个 div。

.button {

margin: auto;
background-color: #2C3254;
padding: 50px;
text-align: center;
font-size: 60px;
width: 60%; 

}

Answer 1

你需要摆脱漂浮物。由于您 float 了两个 p 元素，因此“container1”实际上与其余元素(span 和 br)一样高，并且 < em>button div 从放置 br 的位置开始，比您预期的更接近顶部。

您可以在按钮上使用样式 clear: Both (不允许内容在元素周围 float )，这样就可以做到这一点，例如:

...   
<div class="button" style="clear:both">
...

或者在其上方添加一个新的 div 作为间隔符，无论什么最适合您:

...   
<div style="clear:both"></div>
<div class="button">
...