如何不使用< div class =" clear">标记 [英] How to not use <div class="clear"> in markup

问题描述

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

如何避免这样做？我弄乱了 overflow：auto ， overflow：hidden ，我什么都没有。

提前感谢

解决方案

一个常见的方法是 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>此浮动右< / div> 
< div style =clear：both;>< / div> 
< p>此文字在其下清除。< / p> 
  

示例（新增 clearfix ）： / p>

 < div class =floatingrightmenu clearfix>这会浮动右边< / div> 
< p>此文字在其下清除。< / p> 
  

---

^{strong>注意：自动清除意味着它最适合单个浮动元素。如果你希望有多个元素相邻放置，将它们全部放入一个也是浮动的容器中，并将 clearfix 应用到该容器。} p>

All the time my code is riddled with <div>'s that are used to clear/expand a div to look correct. Whenever it doesn't look correct, I add a <div style="clear:both;"> and it fixes the problem in IE7.

How do I avoid doing this? I mess with the overflow:auto, overflow:hidden and I get nothing.

Thanks in advance

解决方案

One common method is the clearfix class. Instead of needing extraneous <div style="clear:both;"> elements (as you have been doing) after the floating element, you simply add this class to the floating element itself and the layout is automatically cleared after it.¹

My favorite one is from http://perishablepress.com/press/2009/12/06/new-clearfix-hack. It supports modern browsers as well as IE6 and 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 */

Example (old/bad):

<div class="floatingrightmenu">This floats right</div>
<div style="clear:both;"></div>
<p>This text is cleared below it.</p>

Example (new with clearfix):

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

---

^{1: Note: the automatic clearing means that it works best with single floated elements. If you wish to have multiple elements floated next to each other, put them all into a single container which is also floated and apply clearfix to that container.}

这篇关于如何不使用< div class =" clear">标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！