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

Answer 3

当您使用CSS浮动项目时，它们将从页面的自然流状态中删除。

如果它们位于容器DIV中，则会将项目移出并让其父项看不到子元素的去向。然后容器会缩回到拳击区域，就好像元素首先不在那里一样。

为了弥补这一点，您必须为容器的属性指定overflow:hidden。

默认情况下，它设置为visible，如果已经浮动，则允许任何内容“掉出”。

通过在CSS中设置它来纠正它：

#buttons 
{
    overflow:hidden;
}

现在，这将限制浮动元素显示在父DIV的上下文和范围内。

Answer 4

只要您定义父级的溢出，它就会清除所有浮动。

在父母身上使用overflow：auto，你的好处就去了！

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

（我听说这可以使用display：inherit，但还没试过。）

Answer 5

通常，最好的选项是clearfix method或在包含父级上设置'overflow：hidden'的方法。

在您的具体示例中，您还有另一个选项：根本不能浮动任何输入，并在#buttons上设置'text-align：right'

#buttons {
    text-align: right;
    }

虽然我依赖'overflow：hidden'相当多，但值得注意的是，如果你试图将任何元素置于包含'overflow：hidden'的包含元素的外部（或部分外部），，定位元素将在包含元素的边界处被剪掉。（这种情况并不常见，但需要注意的是“陷阱”。）

您可能还会发现the blog post "Lessons Learned Concerning the Clearfix CSS Hack" by Jeff Starr有趣。

如何避免清空div？

5 个答案: