CSS布局 - 混合使用绝对定位和浮动定位

Question

我有一个基本的CSS布局：

CSS

左侧栏

盒子在页面左侧沿着页面长度方向延伸。

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

这个包含两个内部框，全宽度，左浮动一个在另一个下面。

主体内容（右列）

这个不是浮动的：

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

原理

在主体中，我使用了很多浮动的div布局，这些布局通常需要clearfix元素，如<div style="clear:both"></div>（样式内联显示以方便查看）。

这些clearfix元素会影响我的原始左侧列浮动，因此我决定将左侧列设置为绝对位置。这样，我就可以根据需要清除主体中的布局，以实现最佳效果。

问题

左侧列和主体内容包含在一个具有可见背景的包装器中。

当左侧列中的项目数量增加时，左侧列会扩展并可能延伸到包装器下方。我需要阻止这种情况发生。

从根本上讲，我是否可以重新使用float:left将左侧列放回，并使我的clearfix对其中的浮动内容起作用？

- sscirrus

Answer 1

没有代码很难说，但是这里有一些理由... 对于左列使用绝对定位是一个不好的选择，因为您的清除方式不起作用（可能您没有做对）。左列作为具有绝对位置的元素，实际上并没有包含在那个包装器中（它被从渲染流中取出），这就是为什么它会覆盖它的原因。您可以使用一点JavaScript来扩展当左列变大时的包装器... 或者如果这不方便，您应该尝试使用左浮动来使其工作。

- Nevena

---

谢谢您的回复。我同意使用浮动可能比使用绝对定位更好。但是，由于我的主面板中的布局在用户输入较长时会受到影响，所以我感觉被迫这样做（这就是为什么我添加了clearfix）。如果我的左列使用浮动，那么如何避免使用clearfix呢？ - sscirrus

@sscirrus 没有看到你的代码很难说。我猜你在将左列设置为浮动时，清除嵌套浮动存在问题。你可以尝试在主框上使用 overflow: hidden。看一下这里，你可能会发现一些有趣的观点，我肯定会... 这也是解决嵌套浮动清除问题的一个方案。祝好运！ - Nevena

Answer 2

尝试在您的左侧列中添加：

position:absolute;
top:0px;
bottom: 0px;

确保您的主体元素具有position:relative或其他位置属性。

这应该使左列拉伸以适应父元素的高度（只要它也被定位，position:relative就可以轻松实现）。

我刚刚发现了这个技巧，还没有尝试过，但它很有道理，我敢打赌它会起作用。

- cruxwireweb

---

我的代码中已经指定了左列的位置声明、顶部和底部。问题是左列会根据其内容拉伸，而父元素并没有随之拉伸。 - sscirrus