Html 尝试使用div作为不同部分的分隔符

基本上，我试图使用

标记创建一个底部边框来分隔页面上的不同内容，但当我滚动到底部并在那里插入div以分隔内容时，它将忽略我放置的其他标记，并将其自身附加到上一个div分隔符上

我怎样才能解决这个问题？我试着用了一个HR标签，但效果也一样

这是我的代码：

div{
保证金：0；
填充：0；
}
#包装纸{
宽度：100%；
保证金：0自动；
}
#左列，
#右栏{
边界：无；
浮动：左；
最小高度：450px；
颜色：白色；
}
#左列{
宽度：50%；
}
.集装箱{
左边距：10%；
宽度：40%；
文本对齐：居中；
}
#右栏{
/*身高：100%*/
宽度：40%；
浮动：对；
背景色：#c9ccc9；
}
.边界{
边框底部：40px实心#8dc43f；
}
p{
颜色：黑色；
}
.infotext{
颜色：#8dc43f；
左缘：30%；
字体系列：“Abeeze”，无衬线；
字体大小：30px；
}
.infotexttitle{
颜色：#8dc43f；
左边缘：25%；
字体系列：“Abeeze”，无衬线；
字体大小：30px；
}
.infotexttitlepower{
颜色：#8dc43f；
左缘：36%；
字体系列：“Abeeze”，无衬线；
字体大小：30px；
}
.infotexttitlecomm{
颜色：#8dc43f；
左边缘：17%；
字体系列：“Abeeze”，无衬线；
字体大小：30px；
}
.蓝标签{
宽度：264px；
填充：0；
/*变换：旋转（180度）*/
显示：块；
/*边界塌陷：塌陷*/
左边距：176像素；
利润上限：4倍；
}
.绿色标签{
宽度：264px；
填充：0；
/*变换：旋转（180度）*/
显示：块；
/*边界塌陷：塌陷*/
左边距：180像素；
利润上限：-26px；
}
奥兰吉塔格先生{
宽度：280px；
填充：0；
/*变换：旋转（180度）*/
显示：块；
/*边界塌陷：塌陷*/
左边距：175px；
利润上限：-15px；
}
.形象{
位置：相对位置；
宽度：80%；
/*对于IE 6*/
}
titleimg先生{
左边缘：-60%；
保证金权利：10%；
}
图文{
位置：绝对位置；
顶部：200px；
左：0；
宽度：100%；
}
.bgimg{
背景尺寸：封面；
宽度：100%；
身高：60%；
边界塌陷：塌陷；
显示：块；
保证金：0；
填充：0；
}
#容器{
高度：400px；
宽度：400px；
位置：相对位置；
}
#正文{
z指数：100；
位置：绝对位置；
颜色：白色；
字体大小：24px；
字体大小：粗体；
左：43%；
最高：25%；
字体系列：“Abeeze”，无衬线；
}
#第二文本{
z指数：100；
位置：绝对位置；
颜色：白色；
字体大小：24px；
字体大小：粗体；
左：37%；
最高：30%；
字体系列：“Abeeze”，无衬线；
}

海龟标签

始终连接到嵌套
特征

电池寿命长

Lorem ipsum Door sit amet，Concetetur Adipsicing Elite。库拉比图尔·乌尔纳·埃尼姆（Curabitur urna enim），阿利克特（aliquet non-sagittis）坐在阿梅特（amet），尤伊斯莫·卢克图斯（euismod luctus risus）。这是一种很好的发酵剂。这是我的朋友。悬钩子
波蒂蒂。

噪音通知


Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·乌尔纳·埃尼姆（Curabitur urna enim），阿利克特（aliquet non-sagittis）坐在阿梅特（amet），尤伊斯莫·卢克图斯（euismod luctus risus）。这是一种很好的发酵剂。这是我的朋友。潜力悬钩子。

始终打开

Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·乌尔纳·埃尼姆（Curabitur urna enim），阿利克特（aliquet non-sagittis）坐在阿梅特（amet），尤伊斯莫·卢克图斯（euismod luctus risus）。这是一种很好的发酵剂。这是我的朋友。潜力悬钩子。

双向通信


Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·乌尔纳·埃尼姆（Curabitur urna enim），阿利克特（aliquet non-sagittis）坐在阿梅特（amet），尤伊斯莫·卢克图斯（euismod luctus risus）。这是一种很好的发酵剂。这是我的朋友。潜力悬钩子。

这里的问题来自于如何构建页面。您有一个左/右列，它是使用

floats

构建的。当您使用float时，它会将float中的内容从页面的一般流程中移除。尝试移除这些浮动，它应该会按预期工作

我把你的彩车从小提琴上取下来，边界开始正常工作了

这里有一个关于浮动如何工作的基本概念：顶部的框不会重叠，因为没有浮动，但是底部的两个框你只能看到绿色，因为红色的框是浮动的，所以绿色的框占据了它的空间。为了避免这种情况，可以向浮动div添加一个显式的高度，但这样就不能动态扩展内容

---

下面是关于列如何工作的基本概念：

创建一个可以工作的列，以便更容易地处理它。如果只粘贴整个代码，则很难诊断问题。我将其复制/粘贴到JSFIDLE，但我仍然不知道您想要什么@AbdulAhmad您在顶部看到的绿色边框我正在尝试将其放在页面底部，并且我可以将页面的两个部分分开，但是当再次使用div时，它将添加到顶部的绿色边框上，使其大小加倍这是大量复制div和格式问题的代码。你可以用什么最低限度的代码来演示这个问题？这将有助于使诊断更易于管理。看起来很好，工作正常，谢谢！真管用！但是，我会将div右边的边距设置为多少