Question

在这里，我期待count向下移动到每个*ID分段之下，但它并没有发生。每个*ID及其对应的count都在同一行。我该如何解决这个问题以及为什么它没有被清除？

<div class="statusInfo">
  <div class="Scribbles">
    <div class="ScribblesID">Scribbles</div>
    <div class="count">100</div>
  </div>
  <div class="Following">
    <div class="FollowingID">Following</div>
    <div class="count">100</div>
  </div>

  <div class="Followers">
    <div class="FollowersID">Followers</div>
    <div class="count">100</div>
  </div>
</div>

CSS

.statusInfo {
  position: absolute;
  bottom: 30px;
}
.Scribbles {
  float: left;
}
.Following {
  float: left;
}
.Followers {
  float: left;
}
.ScribblesID {
  display: inline-block;
  float: left;
}
.FollowingID {
  display: inline-block;
  float: left;
}
.FollowersID {
  display: inline-block;
  float: left;
}
.count {
  display: inline-block;
  clear: both;
}

Answer 1

clear属性仅适用于块级元素。您正在使用内联块，clear:both;不适用于此。

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

为什么不清楚：两者兼而有之？

1 个答案: