How to not use <div class=“clear”> in markup

问题

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

回答1:

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.}

回答2:

if you pop overflow:hidden; on the container of the floating elements that should work! dunno how cross browser it is however.

回答3:

In Cascade Framework I apply the micro-clearfix by default on block level elements. This allows you to avoid the use of stuff like <div style="clear:both;"> or <div class="clearfix"> with but very minimal side-effects. And if you really want traditional behavior for block level elements, absolute positioning should do the trick. Check out Cascade Framework for yourself to get an idea of how practical it really is.

来源：https://stackoverflow.com/questions/6681768/how-to-not-use-div-class-clear-in-markup