CSS in the Zoom property or the Overflow:auto property clears the float

Preface

In fact, the CSS in the Zoom this property is generally unknown, and even some CSS manuals can not be queried. In fact, the Zoom property is the exclusive properties of IE browser, Firefox and other browsers do not support. It can set or retrieve the scale of an object. In addition, it has other functions, such as triggering the Haslayout property of IE, clearing floating, clearing the overlap of margin, and so on.

Because the Zoom property is the exclusive property of IE browser, he clears the floating function only for IE browser, and Firefox, Google and other browsers need to use the Overflow:auto property to clear the float. These two properties are required to be compatible with IE6, IE7, IE8, Firefox, and Google Chrome.

When we refactor the page, we often use a large container containing multiple floating small container layout, but if the outside of this large container does not set a fixed height value, then the large container height will not change with the inside of the small container height changes, resulting in content overflow phenomenon, then only need to clear the float will return to normal. So as long as the outside of the large container plus overflow:auto properties, you can solve the IE7 and Firefox browser to clear the floating problem, but IE6 does not take effect, so we also need to use the zoom of this IE private properties to achieve a completely clear floating compatibility effect.

Instance Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">