使非浮动元素环绕浮动元素答案

【问题标题】：Making Non-Floating Elements Surround Floating Elements使非浮动元素环绕浮动元素
【发布时间】：2011-08-11 11:58:05
【问题描述】：

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

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

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

CSS 看起来像这样：

ul.items li
{
  display: block;
  border: 1px solid pink;
}

ul.items li img
{
  float: left;
}

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

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

我采用了从Paul O'Brien 找到的替代解决方案，使用了溢出属性。这就像一个魅力。不幸的是，除了左侧的菜单之外，每个列表项都有一个浮动在右上角的菜单。使用overflow: auto，这些项目被推到外面。这可以看到here。标记类似于：

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

有没有什么方法可以使用这种方法让“浮动”元素留在“项目”元素中？或者，我可能会缺少其他解决方案吗？

【问题讨论】：

标签： css css-float

【解决方案1】：

我不能 100% 确定这里的整个用例是什么，但是对于 .floaty 元素，使用 position 代替 float 是否合理？

基本上加这个：

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

Fiddle

【讨论】：

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