L'attribut zoom ou overflow:auto en CSS efface le flottant-tutoriel CSS-php.cn

L'attribut zoom ou overflow:auto en CSS efface le flottant

高洛峰

Libérer： 2017-03-01 15:20:20

original

1345 Les gens l'ont consulté

Avant-propos

En fait, l'attribut Zoom en CSS est généralement inconnu et ne peut même pas être trouvé dans certains manuels CSS. En fait, l'attribut Zoom est un attribut propriétaire du navigateur IE et n'est pas pris en charge par Firefox et les autres navigateurs. Il définit ou récupère la mise à l'échelle de l'objet. De plus, il a d'autres fonctions, telles que le déclenchement de l'attribut hasLayout d'IE, la suppression des flottants, la suppression du chevauchement des marges, etc.

Étant donné que l'attribut Zoom est un attribut propriétaire du navigateur IE, sa fonction flottante n'est applicable qu'au navigateur IE, tandis que Firefox, Google et d'autres navigateurs doivent utiliser l'attribut overflow:auto pour effacer le flottement. Par conséquent, ces deux attributs doivent être utilisés pour assurer la compatibilité avec les navigateurs IE6, IE7, IE8, Firefox et Google.

Lorsque nous reconstruisons la page, nous utilisons souvent la disposition d'un grand conteneur contenant plusieurs petits conteneurs flottants. Cependant, si le grand conteneur à l'extérieur n'a pas de valeur de hauteur fixe, la hauteur du grand conteneur ne le sera pas. be À mesure que la hauteur du petit conteneur à l'intérieur change, le contenu débordera. À ce moment-là, il vous suffit de vider le flotteur et il reviendra à la normale. Par conséquent, tant que l'attribut overflow:auto est ajouté au grand conteneur externe, le problème de la suppression des flotteurs dans IE7 et Firefox peut être résolu. Cependant, il ne prend pas effet dans IE6, nous devons donc également utiliser le zoom, le. attribut privé d'IE, pour effacer complètement les effets flottants compatibles.

Exemple de 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>

Copier après la connexion

Plus d'attributs de zoom ou débordement en CSS : Pour articles liés au flotteur de compensation automatique des attributs, veuillez faire attention au site Web PHP chinois !