communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > le corps du texte

La meilleure façon d'effacer les CSS flottants pour IE7, FF et OP

PHP中文网
Libérer： 2018-09-27 16:18:40
original
2105 Les gens l'ont consulté

En discutant d'un problème de marge dans le groupe de forêt CSS, j'ai accidentellement découvert que le débordement pouvait également être utilisé pour effacer les flottants. Hé, cette méthode est non seulement facile à utiliser, mais également prise en charge par FF, OP et IE7. à partir de maintenant, vous pouvez dire adieu à la longue compatibilité. Une autre mauvaise méthode pour effacer les flotteurs dans FF.

La méthode est vraiment simple, il suffit d'ajouter l'attribut overflow à l'étiquette qui doit être flottante.
Code CSS

ul {
	list-style: none;
	height: auto;
	margin: 0;
	p adding: 0;
	background-color: #436973;
}
li {
	float: left;
	width: 80px;
	height: 80px;
	background-color: #83B1DF;
}
.demo {
	clear: both;
	border: 1px solid #FF00FF;
	margin-bottom: 5px;
}
.overflow {
	overflow: auto;
	zoom: 1;
	background-color: #43FF73;
}
ul {
	list-style: none;
	height: auto;
	margin: 0;
	padding: 0;
	background-color: #436973;
}
li {
	float: left;
	width: 80px;
	height: 80px;
	background-color: #83B1DF;
}
.demo {
	clear: both;
	border: 1px solid #FF00FF;
	margin-bottom: 5px;
}
.overflow {
	overflow: auto;
	zoom: 1;
	background-color: #43FF73;
}
Copier après la connexion

Code HTML 

<div class="demo">
	<ul class="overflow">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
	</ul>
</div>
<div class="demo">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
	</ul>
</div>
Copier après la connexion

où le zoom est préparé pour IE6. 

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 
<head> 
<meta http-equiv="pragma" content="no-cache" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Language" content="utf-8" /> 
<meta name="robots" content="all" /> 
<meta name="author" content="Ghost" /> 
<meta name="Copyright" content="CSSForest" /> 
<meta name="Description" content="CSSɭ" /> 
<meta name="Keywords" content="CSS,web标准,web,Blog,,XHTML,CSSForest,CSS森林" /> 
<title>Overflow hack Demo|www.CSSForest.org</title> 
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" /> 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> 
<script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script> 
<style type="text/css"> 
/*<![CDATA[*/ 
.copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;} 
.copyright a:link{color:#666666;text-decoration:none;} 
.copyright a:hover{color:#CC9900;text-decoration:underline;} 

ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;} 
li{float:left;width:80px;height:80px;background-color:#83B1DF;} 
.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;} 
.overflow{overflow:auto;zoom:1;background-color:#43FF73;} 
/*]]>*/ 
</style> 
</head> 

<body> 
<p></p> 
<div> 
    <ul> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
        <li>4</li> 
        <li>5</li> 
        <li>6</li> 
        <li>7</li> 
        <li>8</li> 
        <li>9</li> 
    </ul> 
</div> 
<div> 
    <ul> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
        <li>4</li> 
        <li>5</li> 
        <li>6</li> 
        <li>7</li> 
        <li>8</li> 
        <li>9</li> 
    </ul> 
</div> 

<div> 
  <div> 
    <div><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div> 
    <div> 
      <p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p> 
      <p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p> 
      <p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p> 
      <p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p> 
      <strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div> 
  </div> 
</div> 
</body> 
</html>
Copier après la connexion

Remarque : j'ai oublié un point très important. Tous les attributs de débordement n'ont pas le même effet. Par exemple, l'attribut visible ne peut fonctionner que sur IE. Un exemple peut être vu ici : 

<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">  
<head>  
<meta http-equiv="pragma" content="no-cache" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta http-equiv="Content-Language" content="utf-8" />  
<meta name="robots" content="all" />  
<meta name="author" content="Ghost" />  
<meta name="Copyright" content="CSSForest" />  
<meta name="Description" content="CSSɭ" />  
<meta name="Keywords" content="CSS,web标准,web,Blog,,XHTML,CSSForest,CSS森林" />  
<title>Overflow hack Demo|www.CSSForest.org</title>  
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />  
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>  
<script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script>  
<style type="text/css">  
/*<![CDATA[*/  
.copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;}  
.copyright a:link{color:#666666;text-decoration:none;}  
.copyright a:hover{color:#CC9900;text-decoration:underline;}  

ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}  
li{float:left;height:80px;margin-right:2px;padding:0 10px;background-color:#83B1DF;line-height:80px;}  
.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}  
.overflow{overflow:auto;zoom:1;background-color:#43FF73;}  
.overflow1{overflow:hidden;zoom:1;background-color:#43FF73;}  
.overflow2{overflow:visible;zoom:1;background-color:#43FF73;}  
/*]]>*/  
</style>  
</head>  

<body>  
<p>overflow的visible属性只对IE起作用，auto/hidden可对FF、OP起作用。</p>  
<div>  
    <ul>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
    </ul>  
</div>  
<div>  
    <ul>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
    </ul>  
</div>  
<div>  
    <ul>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
    </ul>  
</div>  
<div>  
    <ul>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
    </ul>  
</div>  


<div>  
  <div>  
    <div><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div>  
    <div>  
      <p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p>  
      <p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p>  
      <p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p>  
      <p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p>  
      <strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div>  
  </div>  
</div>  
</body>  
</html>
Copier après la connexion

Dans ce cas, il y a un problème et s'il y a une hauteur et que le contenu dépasse la hauteur, définir auto ou masqué peut avoir des effets indésirables. Apparaître. Voici une solution : pour IE6 et versions antérieures, vous pouvez définir directement la hauteur ; pour IE7, FF et OP, vous pouvez définir la hauteur minimale.

code css : 

overflow   
{   
height:auto;   
_height:200px;   
min-height:200px;   
verflow:auto;   
zoom:1;   
_overflow:visible;   
}
Copier après la connexion
Étiquettes associées：
flotteur clair
source：php.cn
Article précédent：Code pour l'effet de table avec ombre implémenté à l'aide de l'échange css_Experience Article suivant：Filtre CSS pour obtenir un effet de trait de texte (FF et IE6 non pris en charge)
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Même après l'effacement, la valeur de mon entrée de fichier reste Comme vous pouvez le voir sur la capture d'écran. Je sélectionne un fichier, conserve la f...
Depuis 2024-04-06 15:44:52
0
1
384
Problème d'initialisation de la propriété CommandText J'essaie de matérialiser les données dans 2 (plus tard 3) tables simultanément à l'aide d'...
Depuis 2024-04-04 22:43:24
0
1
385
Problèmes jQuery.remove() et array.splice() J'ai donc une page qui contient une liste d'articles et une liste de courses. Si vous ajou...
Depuis 2024-04-04 17:21:35
0
1
347
Titre révisé : Calculer le total en fonction de la sélection d'une case à cocher Je développe une application simple de suivi financier. Dans l'application, il y a un tabl...
Depuis 2024-04-04 13:45:50
0
1
3465
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal