html - 为什么上面的div向左浮动时div元素不向上移动？

Question

我一直在研究 CSS 中的 float 属性。

这是我的 html 代码:

.left {
  float: left;
  text-align: center;
  width: 25%;
}
.normal {
  text-align: center;
  width: 25%;
}

<div class="left">
  <img src="Icon.png">
  <h1>hi my name is left</h1> 
  <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>
<div class="normal">
  <img src="Icon.png">
  <h1>hi my name is normal</h1> 
  <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>

我想知道为什么我的 div使用 div 类 normal 不会向上移动还剩几节课？

我问这个问题是因为如果我写一个

<p>something</p>

在我的 div 之后类(class)留下了p tag的内容向上 移动，但这不会发生在 div 上.. 我想知道为什么会发生这种情况？

Answer 1

第一个 div 的宽度为 25%，因此它在水平方向上占据了可用空间的 25%。
第二个 div 也是 25% 宽；因此，第一个 div 占用了第二个 div 占用的所有空间。右边已经没有更多空间了!

解决方案:让第二个 div 宽度不是 25%，而是 50%(比第一个多 25%)。

.left {
  float: left;
  text-align: center;
  width: 25%;
}
.normal {
  text-align: center;
  width: 50%;
}

<div class="left">
  <img src="Icon.png">
  <h1>hi my name is left</h1> 
  <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>
<div class="normal">
  <img src="Icon.png">
  <h1>hi my name is normal</h1> 
  <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>