css – 如何不使用标记

前端之家收集整理的这篇文章主要介绍了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应用于该容器。

原文链接:https://www.f2er.com/css/218456.html

猜你在找的CSS相关文章