Question

我的代码一直充满<div>，用于清除/展开div以使其正确无误。每当它看起来不正确时，我都会添加一个<div style="clear:both;">并修复IE7中的问题。

我该如何避免这样做？我混淆了overflow:auto，overflow:hidden，我什么都没得到。

提前致谢

Answer 1

一种常见方法是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应用于该容器。}

Answer 2

如果你弹出溢出：隐藏;在应该工作的浮动元素的容器上！不知道如何跨浏览器。

Answer 3

在Cascade Framework中，我默认在块级元素上应用micro-clearfix。这样可以避免使用<div style="clear:both;">或<div class="clearfix">之类的东西，但副作用非常小。如果你真的想要块级元素的传统行为，绝对定位应该可以解决问题。请亲自查看Cascade Framework，了解它的真实程度。

如何在标记</div>中不使用<div class =“clear”>

3 个答案: