代码说明：
我正在创建一个包含三个链接的栏。我制作了这个栏，并尝试使用float，text-align和width来区分链接。 （我试图让中心链接居中，其他两个与它等距，并且与两侧等距。）但是，当我最初使用3 divs（除了divs以外的divs “我”div），背景颜色消失了。所以我搞砸了它，并意识到第三个链接div上的浮动导致了问题。所以我添加了另一个div（最终div），并且使用了一些文本。但是，因为我必须在其中放入文字，所以它会缩短我的间距。所以我在另一边（第一个）做了一个float来平衡它。然而，它仍然会抛弃我的间距而没有浮动！
问题（S）：
为什么行中最后div上的<div style="padding:0px;margin:0px;background-color:#3C3C3C;">
<div style="color:#3C3C3C;float:left;">
I
</div>
<div style="margin-left:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="width:50%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="margin-right:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="color:#3C3C3C;float:right;">
I
</div>
</div>
属性会导致背景颜色消失？
{{1}}
答案 0 :(得分：2)
你必须通过添加例如最后一个div下面的另一个div来清除浮动：
<div style="clear:both;"></div>
答案 1 :(得分：0)
将overflow: auto添加到您的外部<div>：
<div style="padding:0px; margin:0px; background-color:#3C3C3C; overflow: auto;">
答案 2 :(得分：0)
问题在于，因为您在另一个未浮动的元素中浮动元素会导致包装元素呈现为空。
要解决此问题，您可以在包装上添加一些宽度和float:left; div
查看这个似乎正在寻找的jsbin示例。
基本上你的第一个div应该是这样的;
<div style="padding:0px; margin:0px; background-color:#3C3C3C;float: left; width: 100%;">
然后你只需要改变宽度，并删除任何边距或填充。
p.s。你真的应该考虑放弃内联样式并使用带有Id和类名的外部样式表。