The zoom attribute or overflow:auto attribute in CSS clears floating-CSS Tutorial-php.cn

The zoom attribute or overflow:auto attribute in CSS clears floating

高洛峰

Release： 2017-03-01 15:20:20

Original

1356 people have browsed it

Preface

In fact, the Zoom attribute in CSS is generally unknown, and cannot even be found in some CSS manuals. In fact, the Zoom attribute is a proprietary attribute of the IE browser and is not supported by Firefox and other browsers. It sets or retrieves the object's scaling. In addition, it has other functions, such as triggering IE's hasLayout attribute, clearing floats, clearing margin overlap, etc.

Because the Zoom attribute is a proprietary attribute of IE browser, its floating function is only applicable to IE browser, while Firefox, Google and other browsers need to use the overflow:auto attribute to clear floating. Therefore, these two attributes must be used to achieve compatibility with IE6, IE7, IE8, Firefox, and Google browsers.

When we reconstruct the page, we often use the layout of a large container containing multiple floating small containers. However, if the large container outside does not have a fixed height value, then the height of the large container will not be As the height of the small container inside changes, the content will overflow. At this time, you only need to clear the float and it will return to normal. Therefore, as long as the overflow:auto attribute is added to the large external container, the problem of clearing floats under IE7 and Firefox can be solved. However, it does not take effect under IE6, so we also need to use zoom, a private attribute of IE, to completely clear the floats. Compatible effects.

Example code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MJBlog</title>
<style type="text/css">
.box{ 
     width:300px;
  height:auto;
  background-color: #000000;
  margin:100px auto;
  padding:5px;

  }
.box h2{ width:300px; line-height:24px; color:#CCCCCC;}  
.xx { width:140px; float:left; height:24px; overflow:hidden; padding:0px 5px; line-height:24px; color: #FF9933;}
.za{overflow:auto; zoom:1}
.zb{overflow:auto;}
.zc{zoom:1;}     
  
</style>
</head>

<body>


<p class="box">
<h2>这个没加overflow:auto和zoom:1属性，没有清除浮动，底下的li产生溢出重叠现象</h2>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
</p>

<p class="box za">
<h2>这个加overflow:auto和zoom:1属性，清除浮动，正常</h2>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
</p>

</body>
</html>

Copy after login

More zoom attributes or overflow:auto attributes in CSS For articles related to clearing floats, please pay attention to the PHP Chinese website!