如何避免清空div？

Question

我最近一直在使用很多漂浮物:

<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>

在末尾.如果我没有将它们全部浮动,那将抛弃布局.

有一个很好的解决方案吗？

Answer 1

是的,overflow: hidden在容器上使用即:

<style type="text/css">
#buttons { overflow: hidden; }
</style>

Answer 2

这是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%;
}