一直以来，我的代码都充满了<div>，这些<div> 用于清除/扩展 div 以使其看起来正确。每当它看起来不正确时，我添加一个<div style="clear:both;"> 并修复了 IE7 中的问题。
如何避免这样做？我搞砸了overflow:auto、overflow:hidden，但我什么也没得到。
提前致谢
【问题讨论】：
一种常用方法是clearfix 类。不需要在浮动元素之后添加无关的<div style="clear:both;"> 元素（就像您一直在做的那样），您只需将此类添加到浮动元素本身，然后布局会自动清除。1
我最喜欢的是http://perishablepress.com/press/2009/12/06/new-clearfix-hack。它支持现代浏览器以及 IE6 和 IE7。
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
示例（旧/坏）：
<div class="floatingrightmenu">This floats right</div>
<div style="clear:both;"></div>
<p>This text is cleared below it.</p>
示例（clearfix 新增）：
<div class="floatingrightmenu clearfix">This floats right</div>
<p>This text is cleared below it.</p>
1: 注意：自动清除意味着它最适合单个浮动元素。如果您希望多个元素彼此相邻浮动，请将它们全部放入一个也浮动的容器中，并将clearfix 应用于该容器。
【讨论】：
<div>”，换句话说，必须将<div style="clear:both;"> 放在 浮动元素之后。这是解决这个问题的确切方法。
clear: both 避免空div。这个 clearfix 类应该被添加到包含浮动元素的容器中。如果完成，他会摆脱空的 div。
如果你弹出溢出：隐藏；在应该工作的浮动元素的容器上！不知道它是如何跨浏览器的。
【讨论】：
在Cascade Framework 中，我默认在块级元素上应用微清除修复。这使您可以避免使用像 <div style="clear:both;"> 或 <div class="clearfix"> 这样的东西，但副作用非常小。如果你真的想要块级元素的传统行为，绝对定位应该可以解决问题。亲自查看Cascade Framework，了解它的实用性。
【讨论】：