La meilleure façon d'effacer les CSS flottants pour IE7, FF et OP
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;
}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>
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>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>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;
}
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment aligner les zones de saisie en HTML
Apr 05, 2024 am 10:18 AM
Les méthodes d'utilisation de HTML pour aligner les zones de saisie incluent : l'utilisation de l'attribut text-align pour spécifier la gauche, la droite ou le centre pour aligner le texte de la zone de saisie. Utilisez la propriété float pour faire flotter la zone de saisie vers la gauche ou la droite de la page afin d'affecter son alignement relatif.
Quelles sont les 5 façons de dégager les flotteurs ?
Nov 20, 2023 pm 04:27 PM
Les cinq façons d'effacer les flottants sont : 1. Utiliser l'attribut clear ; 2. Utiliser l'attribut overflow ; 3. Utiliser le pseudo-élément clearfix 4. Utiliser la disposition en grille ; Introduction détaillée : 1. Utilisez l'attribut clear, qui est la méthode la plus couramment utilisée pour effacer les flottants. Vous pouvez ajouter un élément après l'élément flottant et y ajouter le style "clear: Both;" définir l'élément parent Set "overflow: auto;" et ainsi de suite.
Existe-t-il un moyen d'effacer les flotteurs ?
Feb 22, 2024 pm 04:00 PM
Existe-t-il une méthode pour effacer les flottants ? Des exemples de code spécifiques sont requis. Dans la mise en page Web, les flottants sont une méthode de mise en page courante qui permet aux éléments de se détacher du flux de documents et d'être positionnés par rapport aux autres éléments. Cependant, un problème souvent rencontré lors de l'utilisation d'une mise en page flottante est que l'élément parent ne peut pas envelopper correctement l'élément flottant, ce qui entraîne une mise en page désordonnée de la page. Par conséquent, nous devons prendre des mesures pour effacer le flotteur afin que l'élément parent puisse envelopper correctement l'élément flottant. Il existe de nombreuses façons d'effacer les flottants. Ce qui suit présente plusieurs méthodes couramment utilisées et donne des exemples de code spécifiques.
Qu'est-ce que la mise en page ?
Feb 24, 2024 pm 03:03 PM
La mise en page fait référence à une méthode de composition adoptée dans la conception Web pour organiser et afficher les éléments d'une page Web selon certaines règles et structures. Grâce à une mise en page raisonnable, la page Web peut être rendue plus belle et plus soignée, et offrir une bonne expérience utilisateur. Dans le développement front-end, il existe de nombreuses méthodes de mise en page parmi lesquelles choisir, telles que la mise en page traditionnelle des tableaux, la mise en page flottante, la mise en page de positionnement, etc. Cependant, avec la promotion de HTML5 et CSS3, les technologies de mise en page réactives modernes, telles que la mise en page Flexbox et la mise en page Grid, sont devenues
Pourquoi les éléments flottants ne peuvent pas être effacés par la propriété overflow
Jan 27, 2024 am 08:08 AM
Pour analyser pourquoi le flottement ne peut pas être effacé à l'aide de l'attribut overflow, des exemples de code spécifiques sont nécessaires Introduction : Dans la mise en page Web, des problèmes avec les éléments flottants sont souvent rencontrés. Afin de résoudre l'impact des éléments flottants, nous utilisons généralement une méthode de dégagement des flotteurs. Cependant, nous constatons parfois que les flottants ne peuvent pas être correctement effacés à l'aide de l'attribut overflow. Cet article approfondira ce problème et fournira des exemples de code spécifiques. 1. Pourquoi devons-nous nettoyer les flotteurs ? Les éléments flottants signifient retirer l'élément du flux de documents en définissant l'attribut float.
Le rôle de float en CSS
Apr 28, 2024 pm 01:51 PM
La propriété float en CSS permet aux éléments de sortir du flux de documents et de s'aligner le long du bord de leur élément parent, et est utilisée pour créer et aligner des images de texte, des barres latérales de menu flottantes et des éléments qui se chevauchent. Les valeurs d'attribut des éléments flottants incluent left (float gauche), right (float droit), aucun (float clair) et hériter (hériter). Pour éviter qu'un élément flottant ne provoque le débordement de l'élément parent, vous pouvez utiliser la technique clearfix pour ajouter un élément vide et effacer le flottant.
Quels sont les moyens d'effacer les flotteurs en CSS
Oct 30, 2023 am 11:57 AM
Les moyens d'effacer les flotteurs en CSS incluent l'attribut clear, l'attribut de débordement, la classe clearfix, la classe clearfix de l'élément parent, le pseudo-élément pour effacer le flotteur, l'attribut de débordement de l'élément parent et la combinaison de l'attribut clear et de BFC. Introduction détaillée : 1. Utilisez l'attribut clear, une méthode simple et couramment utilisée pour effacer les flottants. En ajoutant un élément vide au niveau du bloc après l'élément flottant et en définissant l'attribut clear pour celui-ci, vous pouvez effacer l'effet flottant précédent et le créer. Les éléments ci-dessous sont disposés normalement et ainsi de suite.
Pourquoi le flotteur transparent de trop-plein n'a-t-il aucun effet ?
Oct 17, 2023 pm 02:29 PM
La raison pour laquelle le flotteur de compensation de débordement n'est pas valide peut être que la hauteur de l'élément flottant n'est pas définie, que l'élément flottant est effacé, que l'élément de compensation est avant l'élément flottant, que la hauteur de l'élément transparent n'est pas définie ou que l'élément transparent est effacé. est après l'élément flottant, etc. Introduction détaillée : 1. La hauteur de l'élément flottant n'est pas définie. Lorsque la hauteur de l'élément flottant n'est pas définie, elle peut ne pas être effacée. La hauteur de l'élément flottant est déterminée par son contenu, donc si le contenu n'en a pas. height, l'élément flottant n'a pas non plus de hauteur ;2. Flottant L'élément est effacé, lorsque l'élément flottant est effacé, la propriété de débordement peut ne pas s'effacer, etc.
