我最近一直在使用很多这样的花车：
<div id="buttons">
<input type="button" id="btn1" value="Button One">
<input type="button" id="btn2" value="Button Two">
<input type="button" id="btn3" value="Button Three">
</div>
有时我会将按钮浮动到右侧。有时我会将它们全部浮动到右侧。这就是问题开始的地方。如果我这样做，它真的会让人流连忘返，所以我必须继续输入这些：
<div style="clear:both;"></div>
在最后。如果我不将它们全部浮动，那会破坏布局。
有没有好的解决方案？
是的，overflow: hidden在容器上使用，即：
<style type="text/css">
#buttons { overflow: hidden; }
</style>
这是 CSS 学习曲线的重要组成部分。当您浮动项目时，它们的包含元素不再考虑浮动元素的垂直高度。您可以使用几种解决方案来解决您的困境。
只需将 #button 容器的高度指定为按钮的高度：
#button { height: 30px; }
一个更好的解决方案是 clearfix hack。它非常防弹，并且无需添加额外的标记和内联 CSS 也可以解决问题。
#buttons:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#buttons {
display: inline-block;
}
html[xmlns] #buttons {
display: block;
}
* html #buttons {
height: 1%;
}
只要你定义了父级的溢出，它就会清除所有的浮动。
在父级上使用溢出：自动，一切顺利！
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
（我也听说过使用 display:inherit 进行这项工作，但没有尝试过。）
当您使用 CSS 浮动项目时，它们会从页面的自然流动状态中移除。
如果它们在一个容器中DIV，那会将项目移出并且其父项看不到子元素的去向。然后容器会收缩到尽可能多的区域，就好像元素一开始就不存在一样。
为了解决这个问题，您必须指定overflow:hidden容器的属性。
默认情况下，它被设置为visible并且将允许任何东西“掉出”盒子，如果它已经被浮动的话。
通过在您的 CSS 中设置它来更正它：
#buttons
{
overflow:hidden;
}
现在，这将约束浮动元素在 parent 的上下文和范围内显示DIV。
通常，最好的选择是clearfix 方法或在包含父项上设置“溢出：隐藏”的方法。
在您的具体示例中，您确实有另一个选择：您根本无法浮动任何输入，并在 #buttons 上设置 'text-align: right'
#buttons {
text-align: right;
}
虽然我相当依赖“溢出：隐藏”，但值得注意的是，如果您尝试将任何元素放置在设置了“溢出：隐藏”的包含元素的外部（或部分外部），则定位元素将在包含元素的边界处被剪掉。（这不会经常出现，但需要注意的“问题”。）