CSS 布局 - 混合绝对和 float 定位

Question

我有这个基本的 CSS 布局:

CSS

左栏

框在左侧沿页面长度向下延伸。

width:16.5%, position:absolute; top:20px; left:1.5%;

它包含两个内部框，全宽，左下 float 。

正文(右栏)

这不是 float 的:

width: 82%;
margin-left: 18%;

理由

我在主体中使用了很多 float div 布局，这些布局通常需要 clearfix 元素，例如 <div style="clear:both"></div> (为方便起见，内联显示的样式)。

这些 clearfix 元素弄乱了我原来的 float 左列，所以我通过使左列成为绝对的来回应。这样，我就可以清除主体中的主要布局。

问题

左栏 + 主体包含在具有可见背景的包装中。

当 Left Column 中的元素数量变大时，left column 会增长并且可以延伸到 wrapper 下方。我需要阻止这种情况发生。

从根本上说，我可以回到 float:left 吗？以允许我的 clearfixes 为其中的 float 内容工作的方式离开列？

Answer 1

没有代码很难说，但这里有一些基本原理.. 对左列使用绝对位置是糟糕的选择，因为你的清除修复不起作用(可能你没有这样做正确的)。左列具有绝对位置，并没有真正包含在该包装器中(它从渲染流中取出)，这就是它越过它的原因。您可以使用少量 JavaScript 在左侧列变大时扩展该包装器。或者如果这不方便，您应该尝试使其与 float left 一起使用.