为什么 div 元素上方的 div 向左浮动时不会向上移动？答案

【问题标题】：Why div element do not move upwards when the div above it is floated left?为什么 div 元素上方的 div 向左浮动时不会向上移动？
【发布时间】：2017-02-02 01:50:21
【问题描述】：

我一直在研究 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 向上移动？

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

<p>something</p>

在我的班级 div 离开后，p tag 的内容向上移动，但 div 不会发生这种情况。我想知道为什么会发生这种情况？

【问题讨论】：

标签： html css web css-float

【解决方案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>

【讨论】：

好答案！但是我认为尺寸点需要更多解释，所以我添加了自己的...

【解决方案2】：

嗨@Gopal Singh Rathore

我相信我已经正确理解了您的问题。

这是因为宽度是在 div 上设置的，它也有一个 display:block，如果你将 display:block 更改为 flex，例如它会出现在它旁边。如果你还在 p 标签上设置了宽度，它的作用与 div 相同。

我希望这能回答你的问题。

【讨论】：

谢谢你的回答，它帮助很大。

【解决方案3】：

正常 div 移到顶部，正常内容不会：参见 normal 扩展：

Lister 先生给你解决方案：你需要让 normal 变宽，以便内容适合 left

的右侧

.left {
  float: left;
  text-align: center;
  width: 25%;
}
.normal {
  text-align: center;
  width: 27%;
  background-color: lightblue;
  border: solid 1px blue;
}

<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>

【讨论】：