额外的文字提升包含框

Question

这很奇怪：

• 当只有一些文字时，.main被按下。 （原因证明here。）
• 当有大量文字时，.wrapper { background-color: blue; display: inline-block; } .main:after { content: " "; clear: both; display: table; } .left-column { float: left; background-color: aqua; } .right-column { float: right; background-color: aqua; }的前几个单词出现在两个浮动框之间。

<div class="wrapper">
  <div class="left-column">
    L Float
  </div>
  <div class="right-column">
    R Float
  </div>
  <div class="main">
    some text
  </div>
</div>

<hr>

<div class="wrapper">
  <div class="left-column">
    L Float
  </div>
  <div class="right-column">
    R Float
  </div>
  <div class="main">
    a huge amount of text
  </div>
</div>

.main

我想知道为什么额外的文字会向上移动$("div").hover( function (e) { e.stopPropagation(); $(this).addClass('active').parents().removeClass('active'); }, function (e) { $(this).removeClass('active').parent().addClass('active'); } ); 。