浮动列从另一列中断内容答案

【问题标题】：Floating column breaks content from another column浮动列从另一列中断内容
【发布时间】：2016-01-04 15:23:22
【问题描述】：

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

float: left; 
width: 225px;

右栏：

margin-left: 245px; 
float: none;

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

【问题讨论】：

【解决方案1】：

出现问题是因为您的一些元素已从文档流中取出（浮动元素），而其他元素仍保留在文档流中（右列已设置为 float: none；但有浮动的子元素） .

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

    float: none;
    margin-left: 245px;

并添加以下代码：

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

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

【讨论】：

【解决方案2】：

您正面临这个问题，因为您没有为右侧部分（内容部分）设置宽度。如果你应用下面的 CSS，你的问题就会得到解决。

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

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

【讨论】：