容器怎么了

Question

将第二个容器的溢出属性更改为“隐藏”会以某种方式破坏周围的容器：

.title {
  margin-top: 100px;
  margin-left: 50px;
  font-size: 30px;
  position: absolute;
  
  /* debug */
  background-color: blue;
}

.first {
  /* debug */
  background-color: green;
}

.second {
  overflow: hidden;
  display: inline-block;
  
  /* debug */
  background-color: red;
}

<div>
  <div class="title">
    <span class="first">Start</span>
    <span class="second"> end</span>
  </div>
</div>

Answer 1

原因不是overflow，而是display: inline-block;：

.title {
  margin-top: 100px;
  margin-left: 50px;
  font-size: 30px;
  position: absolute;
  /* debug */
  background-color: blue;
}

.first {
  /* debug */
  background-color: green;
}

.second {
  overflow: hidden;

  /* debug */
  background-color: red;
}

<div>
  <div class="title">
    <span class="first">Start</span>
    <span class="second"> end</span>
  </div>
</div>

编辑：

如果必须为display: inline-block;，请添加vertical-align: text-bottom;：

.title {
  margin-top: 100px;
  margin-left: 50px;
  font-size: 30px;
  position: absolute;
  /* debug */
  background-color: blue;
}

.first {
  /* debug */
  background-color: green;
}

.second {
  overflow: hidden;
  display: inline-block;
  vertical-align: text-bottom;
  /* debug */
  background-color: red;
}

<div>
  <div class="title">
    <span class="first">Start</span>
    <span class="second"> end</span>
  </div>
</div>