Css 使非浮动元素围绕浮动元素

我目前有一个关于漂浮物的行为问题，以及容器没有包裹它们的问题

我有一个包裹浮动元素的项目列表。这是一个非常简化的版本：

<ul class="items">
  <li><img src="" />Text here</li>
  <li><img src="" />More text</li>
</ul>

之前，我在每个列表项的底部添加了一个“清除”项，以将其展开以环绕图像。这相当于。可以看到一个例子

不幸的是，我有一个菜单浮动在列表的左侧，这意味着添加清除会在第一项下面创建一个巨大的空间。这在上一页的警告语（这很重要）下提到。效果可见一斑

我遵循了从中找到的另一种解决方案，使用overflow属性。这很有魅力。不幸的是，除了左边的菜单外，每个列表项的右上角都有一个浮动菜单。使用

overflow:auto

，这些项目被推到外部。这是可以看到的。标记与此类似：

<ul class="items">
    <li>
        <div class="floaty">*</div>
        <div class="item">
            <div class="img"></div>Text here
        </div>
    </li>
    <li>
        <div class="floaty">*</div>
        <div class="item">
            <div class="img"></div>More text
        </div>
    </li>
</ul>

*
此处文本


*
更多文本

---

是否有任何方法可以使用此方法使“floaty”元素留在“item”元素中？或者，我是否还缺少另一个解决方案？

我不能100%确定这里的整个用例是什么，但是对于

.floaty

元素，使用

position

而不是

float

是否合理

基本上加上：

ul.items li { position: relative; }
div.floaty { float: none; position: absolute; top: 0; right: 0; }

---

太棒了！这很有魅力。很惊讶我没早点想到。

ul.items li { position: relative; }
div.floaty { float: none; position: absolute; top: 0; right: 0; }