css – 如何不使用标记

所有的时候，我的代码充满了< div>，用于清除/展开div看起来正确。每当它看起来不正确时，我添加一个< div style =“clear：both;”>它修复了IE7中的问题。

如何避免这样做？我混乱的溢出：自动，溢出：隐藏，我什么也没有。

提前致谢

解决方法

一个常见的方法是clearfix类。而不需要无关的< div style =“clear：both;”>元素(如你所做的)在浮动元素之后，您只需将此类添加到浮动元素本身，并在布局之后自动清除该布局。

我最喜欢的是从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>

示例(new with clearfix)：

<div class="floatingrightmenu clearfix">This floats right</div>
<p>This text is cleared below it.</p>

1：注意：自动清除意味着它最适合单个浮动元素。如果您希望将多个元素相互漂浮在一起，请将它们全部放入单个容器中，该容器也会浮动，并将clearfix应用于该容器。