Html 为什么是左栏；推；右栏内容？

我实现了一个固定的、一个流动的列布局，我不知道为什么左边的列（关于高度）“推”下我的部分内容

.profile左栏{
宽度：105px；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
填充：0 15px；
浮动：左；
高度：500px；
背景：ddd；
}
.profile右栏{
左边距：105px；
填充：0 15px；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
.集装箱{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
最大宽度：1265px；
保证金：0自动；
左侧填充：20px；
右边填充：20px；
}
.clearfix:之后{
内容：“；
显示：块；
身高：0；
宽度：100%；
明确：两者皆有；
}
.gc:之后{
内容：“；
显示：块；
身高：0；
明确：两者皆有；
}
.gcpad{
左边距：-10px；
右边距：-10px；
}
.g1_4{
宽度：25%；
浮动：左；
左边距：0；
右边距：0；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
最小高度：20px；
背景：#66f；
}
.gpad{
填充：0 10px；
}

---

将元素设置为浮动时，浮动元素后面的元素将围绕它流动。假设我们通常浮动一个图像，图像旁边的文本（足够多的行）甚至在图像下面

您有类似的情况，您仅将左列设置为浮动，右列实际上围绕它流动，并且一旦添加clearfix，它就会立即中断。请参见下面的简单演示

。左{
浮动：左；
宽度：100px；
高度：100px；
边框：1px纯红；
}
.对{
边框：1px纯绿色；
}
.内部{
边框：1px纯蓝色；
}
.内：之后{
内容：“；
显示：块；
明确：两者皆有；
}

1
2.
3.
4.

您需要什么？