容器有什么问题[重复]答案

【问题标题】：What's wrong with the containers [duplicate]容器有什么问题[重复]
【发布时间】：2019-06-02 18:08:21
【问题描述】：

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

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

【问题讨论】：

标签： html css

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

【讨论】：

我需要它是内联块
检查更新的答案。