Question

我正在尝试在内联元素块中向右浮动一个元素，但我注意到一些奇怪的行为。

在上面的codepen链接中，第一个示例显示.box div环绕浮动元素。我认为你需要使用clearfix hack来确保浮动元素的父元素能够正确地包含它，但这不是这里的情况。此外，由于某种原因浮动元素在其父div下创建一些额外的垂直空间（请参阅codepen示例中的蓝色间隙）。我还注意到，如果你在浮动元素旁边放置一些内联文本，那么间隙就会消失（在codepen链接中的第二个例子）。

为什么不需要清除内联块父元素？另外，为什么在父div下方会出现额外的空间，如何将其删除？

.container {
  background-color: blue;
  text-align: center;
}
.box {
  background-color: red;
  display: inline-block;
  width: 300px;
}
.float {
  float: right;
  line-height: 40px;
}

<div class='container'>
  <div class='box'>
    <div class='float'>Float Element</div>
  </div>
</div>
</br>
<div class='container'>
  <div class='box'>
    Some text
    <div class='float'>Float Element</div>
  </div>
</div>

清除内联块元素内的浮动

0 个答案: