html - float 列中断另一列的内容

Question

我创建了一些基于 2 列布局的页面(左列 - .nawigacja-lewa 和右列 - .pdstr-prawa)。当左栏有很多内容时，右栏中的内容会中断 - 只需看看文章和棕色框“O Autorze”之间的巨大差距。 它以某种方式与左列具有此 CSS 的事实有关:

float: left; 
width: 225px; 

和右栏:

margin-left: 245px; 
float: none;  

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

Here is the link.

Answer 1

出现此问题是因为您的某些元素已从文档流中取出( float 元素)，而其他元素仍保留在文档流中(右列已设置为 float :无；但具有 float 的子元素) .

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

    float: none;
    margin-left: 245px;

并添加如下代码:

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

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