html - 右浮动容器导致换行

Question

我现在又在和 float 元素打架了。

请看一下这个 jsfiddle:float-issue

html {
  width: 100%
}
.container {
  /*width: 80%;*/
  /*margin: auto;*/
  border: 1px solid black;
}
.element {
  margin-left: 10px;
  margin-right: 10px;
  background-color: purple;
  float: left;
}

<div class="container" style="float: right">
  <div style="float: left">HEADER</div>
  <div style="border: 1px solid green;">
    <div style="float: left">
      <div class="element">lorem ipsum dolor sit amet.</div>
      <div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
      <div class="element">lorem ipsum dolor sit amet.</div>
    </div>
  </div>
</div>

我不明白的是，为什么紫色元素不在“HEADER”旁边而是在新的一行上？在已经 float 的 div 周围添加绿色边框的 div 元素时出现此问题。我无法解释为什么这会导致新行？任何人都可以帮助我吗？

我认为会发生的是:

1. 绿色边框的 div 没有 float ，所以它填充了容器 div(因为它没有内容(里面的元素是 float 的，因此不是流的一部分)缩小到零高度)。
2. header div 漂浮在绿色边框 div 的“上方”。
3. 由于紫色元素与另一个 div 一起 float ，因此该 div 将 float 在 float 标题旁边。

我错过了什么？

Answer 1

这是 display: inline-block 的解决方案

html {
  width: 100%
}
.container {
  /*width: 80%;*/
  /*margin: auto;*/
  border: 1px solid black;
}
.element {
  margin-left: 10px;
  margin-right: 10px;
  background-color: purple;
  float: left;
}

<div class="container" style="float: right">
  <div style="float: left; display: inline-block;">HEADER</div>
  <div style="border: 1px solid green; display: inline-block;">
    <div style="float: left">
      <div class="element">lorem ipsum dolor sit amet.</div>
      <div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
      <div class="element">lorem ipsum dolor sit amet.</div>
    </div>
  </div>
</div>