Share an optimization plan for clearing floats

clearfix hack is well known as a method to clear floating without using additional tags. This article gives an optimization solution that can further reduce the required The number of css.

Demo: Micro clearfix hack
Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

micro clearfix is ​​optimized based on Thierry Koblentz's "clearfix reloaded" and is suitable for modern browsers.

The following is the code snippet of micro clearfix

.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

"micro clearfix" generates a

pseudo-class element and sets its display attribute to table, which creates an anonymous table-cell and generates a new BFC, which means :before pseudo-class will prevent the top margin from folding, and :after pseudo-class is used to clear floats. The advantage is that there is no need to hide the generated content, and less css code is required.

In order to clear floats include: The before selector is not necessary, but the addition of :before can prevent top-margins from folding. This has two benefits:

• is the same as other BFC methods used to clear floats, ensuring visual For example, when using overflow:hidden

• When using zoom:1 in IE 6/7, visual consistency is ensured

  N.B.: There is a detail: IE 6/ The bottom margin of floating elements in the new BFC 7 will not be included. For further description, see here: Better float containment in IE using CSS expressions.
  content:" "The use avoids an Opera Bug, if the contenteditable attribute also appears in the element, this bug will generate spaces around the element to be cleared. An optional fix is ​​to use font:0/0 a. Thanks to Sergio Cerrutti for testing this bug
  #.

##【Related recommendations】

1.

Free css online video tutorial

2.

css online manual

3.

php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Share an optimization plan for clearing floats. For more information, please follow other related articles on the PHP Chinese website!