我有这个基本的 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 内容工作的方式离开列？
最佳答案
没有代码很难说，但这里有一些基本原理.. 对左列使用绝对位置是糟糕的选择，因为你的清除修复不起作用(可能你没有这样做正确的)。左列具有绝对位置，并没有真正包含在该包装器中(它从渲染流中取出)，这就是它越过它的原因。您可以使用少量 JavaScript 在左侧列变大时扩展该包装器。或者如果这不方便，您应该尝试使其与 float left 一起使用.
关于CSS 布局 - 混合绝对和 float 定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5362718/