How to not use in markup

Question

All the time my code is riddled with

\'s that are used to clear/expand a div to look correct. Whenever it doesn\'t look correct, I add a

相关标签:

Answer 1

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

Answer 2

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

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