代码之家 › 专栏 › 技术社区 › James Newton

为什么溢出:为一个元素隐藏会向下推其周围元素中的文本[[副本]

css html

James Newton · 技术社区 · 5 年前

为什么? 理解为什么它被向下推而不是以这样或那样的方式向上拉呢(我知道如何排列它们的顶部:))

我知道这是overflow:hidden which 导致了它,但不确定为什么它会向下推动div。

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}

<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">SECOND</div>
  <div id="thirdDiv">THIRD
    <br>some more content<br> some more content
  </div>
</div>

http://jsfiddle.net/WGCyu/ .