CSS浮动/定位答案

【问题标题】：css float/positioniongCSS浮动/定位
【发布时间】：2011-03-14 23:19:27
【问题描述】：

所以我有一个小的 div 作为边框，里面有三个 div（见最后的图片）。绿色是全尺寸（减去填充等）；蓝色应该向左浮动并具有特定的宽度；红色应该向右浮动并且也有一个特定的宽度。但是我搞砸了。蓝色和红色 div 都漂浮在主 div 之外。我在这里做错了什么？

这是我当前的代码：

<div style="border: 2px solid black; width: 630px;">
  <div style="width:auto;">Lorem ipsum</div>
  <div style="width:150px; float:left;">This is the blue box</div>
  <div style="width:150px; float:right;">This is the red box</div>
</div>

Ideal Float http://www.mfrl.org/images/howtofloat.png

【问题讨论】：

哪种浏览器对我来说似乎可以正常工作？尝试将样式也移动到外部样式表。从长远来看，这将为您节省很多心痛:)
我在主 div（Chrome 和 IE）之外看不到它们
我已经检查过了，它现在可以在 IE 中运行，但在我的 chrome 或 firefox 中却不行...
在外部 div 上设置 overflow:auto;。见quirksmode.org/css/clearing.html。
@RyanP：我最终会把它移到外部 SS，不过我想先让基础工作。

标签： css position html css-float

【解决方案1】：

花车的定位很有趣。基本上，主 div 在计算自己的高度时没有考虑浮动元素的高度。解决这个问题的最简单方法是在浮动元素之后添加一个清除元素。

这个小提琴应该解释清楚：http://jsfiddle.net/QQxb3/2/

我认为那些对你的帖子发表评论说它确实有效的人一定误解了你所说的“主 div”的意思，因为在这个特定实例中 Chrome 确实遵循的规范和 IE 遵循的规范会放置浮动元素在其父 div 之外。

【讨论】：

谢谢，这正是问题所在。
没有必要使用清除 div。溢出：用 IE 的 hasLayout 触发器隐藏就足够了，而且更整洁。
RyanP13 的评论是正确的。见jsfiddle.net/QQxb3/5。我以前从不知道这一点，并且同意这是一个比我更令人满意的解决方案。
@Steven Xu - 这对我来说也是新的。只是发现有时在复杂的嵌套浮动上使用溢出：自动会产生不希望的滚动。不经常发生，但在我的上一个项目中发生了。