时间戳

首页 > 解决方案 > 当我浮动元素时，我无法理解元素的位置

css - 当我浮动元素时，我无法理解元素的位置

问题描述

.wrapper {
  width: 500px;
}

.image {
  display: inline-block;
  width: 50%;
  height: 100px;
  background: red;  
  
}

.image1 {
  float: left;
  width: 50%;
  height: 50px;
  background: yellow;
}

.image2 {
  float: left;
  width: 50%;
  height: 50px;
  background: red;
}
<div class="wrapper">
<div class="image"></div>
<div class="image1"></div>
<div class="image2"></div>
</div>

https://jsfiddle.net/6o4ynucb/

当我想到时，image2似乎必须在image1之下，但它不占用空间。问题是什么？

标签： css

解决方案

您需要考虑规范以了解此行为。如果您检查规则，您可以阅读以下内容：

  1. 元素浮动框的外部顶部不得高于包含源文档中较早元素生成的框的任何行框的顶部。

然后对于线框，您可以阅读：

在行内格式化上下文中，框从包含块的顶部开始水平排列，一个接一个。这些框之间会考虑水平边距、边框和填充。这些框可以以不同的方式垂直对齐：它们的底部或顶部可以对齐，或者它们中文本的基线可以对齐。包含形成一条线的框的矩形区域称为线框。 参考

在您的情况下，inline-block正在创建一个线框，其高度由该 inline-block 1逻辑定义。第一个浮动可以放在左边的线框内（有足够的空间），但第二个浮动不能。所以规则 (6) 将适用，它将在该行框下开始。

这是一个浮动元素宽度的小动画，以便更好地查看：

.wrapper {
  width: 500px;
}

.image {
  display: inline-block;
  width: 50%;
  height: 100px;
  background: red;  
  
}

.image1 {
  float: left;
  width: 50%;
  height: 50px;
  background: yellow;
  animation:change 5s linear infinite alternate;
}

.image2 {
  float: left;
  width: 50%;
  height: 50px;
  background: blue;
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    width:10%;
  }
}
<div class="wrapper">
<div class="image"></div>
<div class="image1"></div>
<div class="image2"></div>
</div>

一个浮动框向左或向右移动，直到它的外边缘接触到包含块的边缘或另一个浮动的外边缘。如果有 line box，则浮动框的外顶部与当前 line box 的顶部对齐。

如果没有足够的水平空间放置浮动，它会向下移动，直到它适合或没有更多的浮动。

更多细节在这里：https ://www.w3.org/TR/CSS21/visuren.html#floats

如果你让 inline-block 的高度更小，另一个有趣的结果是：

.wrapper {
  width: 500px;
  border:1px solid;
}

.image {
  display: inline-block;
  width: 50%;
  height: 20px;
  background: red;  
  
}

.image1 {
  float: left;
  width: 70%;
  height: 50px;
  background: yellow;
  animation:change 5s linear infinite alternate;
}

.image2 {
  float: left;
  width: 70%;
  height: 50px;
  background: blue;
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    width:10%;
  }
}
<div class="wrapper">
<div class="image"></div>
<div class="image1"></div>
<div class="image2"></div>
</div>

  1. 当两个宽度都小于 50% 时，都可以放在行内块之前的行框内
  2. 当两个宽度都超过 50% 时，下一个浮点数向下移动并从 inline-block 定义的行框顶部开始并触摸第一个浮点数的右边缘
  3. 当每个宽度大于 50% 时，两个浮动都向下移动

1注意内联块和浮动向下移动时之间的小空间。这是由于基线对齐是定义线框的一个重要事实。

您可以更改对齐以将其删除：

.wrapper {
  width: 500px;
  border:1px solid;
}

.image {
  display: inline-block;
  vertical-align:top;
  width: 50%;
  height: 20px;
  background: red;  
  
}

.image1 {
  float: left;
  width: 70%;
  height: 50px;
  background: yellow;
  animation:change 5s linear infinite alternate;
}

.image2 {
  float: left;
  width: 70%;
  height: 50px;
  background: blue;
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    width:10%;
  }
}
<div class="wrapper">
<div class="image"></div>
<div class="image1"></div>
<div class="image2"></div>
</div>

推荐阅读