html - 防止元素环绕 float 的兄弟元素

Question

我希望内容 不要围绕它的 float 兄弟(它可以 float 在内容的左侧或右侧)。

内容之后将没有内容，因此包含 float /重新对齐基线是不可能的。我只想让内容“站起来而不是蜷缩”

我知道这很容易通过输入 overflow:auto/hidden 来完成关于内容-做了很多次。但是，这一次，我不能因为。

• 内容将包含 <ul>继承的宽度和有box-shadow - 如果内容有overflow:auto/hidden，内容将裁剪阴影
• 我无法在 <ul> 的两侧设置填充因为它必须与内容的宽度相同。
• 我不能以任何度量单位显式设置尺寸、填充和边距，就像我在放置 overflow:auto/hidden 时那样做。 .这包括(但不限于)添加边距以使环绕远离 float 元素 - float 元素的内容的宽度可能是动态的。

我的 html 和 css 在这里:http://jsfiddle.net/QQQB5/2/ - 但这个使用 overflow以防止环绕但剪切阴影。

除了使用 overflow 之外，还有其他方法可以防止内容 换行吗？ ？尽可能地，没有黑客，没有“技巧/作弊”。如果无法避免，可以接受额外加价。

Answer 1

只需在内容容器上也使用 float:left 就可以了:)

.content {zoom:1; float:left;}

更新:

只是因为您提供的链接是 2004 年使用的 FNE，所以现在情况不同了。

使用 CSS3，您只需添加:

.container:after { 
      content: "";
      display: block;
      clear: both;
 }

而且您不会 float 所有内容。