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+

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

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.

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

2.

3.

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!