更好的浮动清理

Question

  

可能重复：
  How do I clear my floats?

有没有办法比清除div更好地清除浮动？

目前我正在使用div来清除像

这样的花车

<div style="clear:both"></div>

Answer 1

作为另一种建议，你根本不能使用花车......

我发现几乎所有我要做的事情，我都可以使用display:inline-block;来实现，而且不必弄​​乱清除花车。

我知道这是一个稍微左侧的答案，但值得考虑。

inline-block确实有一些怪癖，但我希望你能试一试。 （哦，它确实在IE6中有一些错误，如果你需要支持那个浏览器可能会让你失望......它们可以解决，但是如果你支持IE6那么你还有其他问题需要担心）

Answer 2

您听说过clearfix吗？这样你只需要指定类名：

<div class="clearfix"></div>

Answer 3

我喜欢<br />来清除浮点数，而在CSS中，只需添加一些类：

br.left { clear: left; }
br.right { clear: right; }
br.both { clear: both; }

像魅力一样，易于实施 - <br class="left" />。

Answer 4

你根本不需要clearfix div。

你应该使用overflow:auto;

http://jsfiddle.net/HharD/

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>

CSS

#container {width:200px;background:#faf;min-height:10px;overflow:auto;}
#left {width:100px;background:#fa0;float:left;height:100px;}
#right{width:100px;background:#09f;float:left;height:110px;}