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

One common method is the clearfix class. Instead of needing extraneous

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):

This floats right

This text is cleared below it.

Example (new with clearfix):

This floats right
This text is cleared below it.

---

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

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...