浮动列中断另一列的内容

Question

我创建了一些基于 2 列布局的页面（左列 - .nawigacja-lewa & right - .pdstr-prawa）。当左栏有很多内容时，右栏的内容会中断 - 看看文章和棕色框之间的巨大差距 "O Autorze"。它与左栏有这个 CSS:

的事实有某种联系

float: left; 
width: 225px;

右栏：

margin-left: 245px; 
float: none;

我知道这个问题的解决方法，但我想知道是什么原因造成的。 :)

Answer 1

您遇到这个问题是因为您没有为右侧部分（内容部分）设置宽度。如果您应用以下 CSS，您的问题将得到解决。

.nawigacja-lewa{
    position:absolute;
    float:none;
}

.pdstr-prawa{
    float:right;
    margin-left:245px;
}

Answer 2

出现此问题是因为您的某些元素已从文档流中删除（浮动元素），而其他元素仍保留在文档流中（右列已设置为浮动：none；但浮动的子元素）。

也许最简单的解决方法是从右栏中删除以下代码：

    float: none;
    margin-left: 245px;

并添加以下代码：

    float: right;
    width: calc(100% - 225px);

这使右侧栏浮动在侧边栏旁边，并将宽度定义为其父级 (blog-str) 宽度的 100%，减去导航栏的宽度。

Floating column breaks content from another column