Résumé des méthodes courantes pour effacer les flotteurs dans CSS_Experience Exchange

Il existe trois méthodes couramment utilisées pour effacer les flotteurs.
Il s'agit du code source flottant qui n'a pas été effacé. Le fond jaune clair de l'élément parent n'est pas visible lors de l'exécution du code.                                                                                   

Gauche <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>Bien<div id="layout"> <div id="left"> </div> <div id="right"></div> </div> [Ctrl+A Tout sélectionner Remarque :
Si vous devez introduire des J externes, vous devez actualiser pour exécuter ] 1. Effacer le flotteur avec une étiquette vide. Une méthode que j'utilise depuis longtemps est que la balise vide peut être une balise div ou une balise P. J'ai l'habitude d'utiliser

, qui est assez court, et de nombreuses personnes utilisent également

---

. Il leur suffit d'effacer la bordure, mais en théorie, il peut s'agir de n'importe quelle étiquette. Cette méthode consiste à ajouter une telle balise pour effacer float une fois que tous les éléments flottants à l'intérieur de l'élément parent flottant doivent être effacés, et à définir le code CSS correspondant : clear:both. L’inconvénient de cette approche est qu’elle ajoute des éléments structurels inutiles.

Gauche <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} .clr{clear:both;} --> </style>Bien<div id="layout"> <div id="left"></div> <div id="right"> </div> <p class="clr"></p> </div> [Ctrl+A Tout sélectionner Remarque :
Si vous devez introduire des J externes, vous devez actualiser pour exécuter ] 2. Utilisez l'attribut overflow. Cette méthode résout efficacement l'inconvénient de devoir ajouter du code involontaire en effaçant les flottants à travers les éléments d'étiquette vides. Pour utiliser cette méthode, il vous suffit de définir la propriété CSS : overflow:auto dans l'élément qui doit être débarrassé du flottant, et c'est tout ! "zoom:1" est destiné à la compatibilité avec IE6.

Gauche <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;overflow:auto;zoom:1;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>Bien<div id="layout"> <div id="left"> </div> <div id="right"></div> </div> [Ctrl+A Tout sélectionner Remarque :
Si vous devez introduire des J externes, vous devez actualiser pour exécuter ] 3. Utilisez le pseudo-objet après pour flotter clairement. Cette méthode s'applique uniquement aux navigateurs non-IE. Veuillez vous référer aux exemples suivants pour connaître les méthodes d'écriture spécifiques. Veuillez faire attention aux points suivants lors de l'utilisation. 1. Dans cette méthode, height:0 doit être défini pour le pseudo-objet qui doit effacer l'élément flottant, sinon l'élément sera plusieurs pixels plus haut que la valeur réelle 2. L'attribut content est nécessaire, mais sa valeur peut être ; discussion idéale vide et bleue Dans cette méthode, la valeur de l'attribut content est définie sur ".", mais j'ai trouvé qu'il est également possible de le laisser vide.

Gauche <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #layout:after{display:block;clear:both;content:"";visibility:hidden;height:0;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>Bien<div id="layout"> <div id="left"> <br><input onclick="runEx('runcode74943')" type="button" value="运行代码"> <input onclick="doCopy('runcode74943')" type="button" value="复制代码"> <input onclick="doSave(runcode74943)" type="button" value="保存代码">[Ctrl+A 모두 선택 참고: <a href="/article/23421.htm" title="查看具体详情" target="_blank">외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. </a>]</div> <br> <br> 이 세 가지 방법에는 각각 장단점이 있으므로 사용 시 가장 좋은 방법을 선택해야 하며 이에 비해 두 번째 방법이 더 바람직합니다. 위의 방법은 원본이 아니며 모두 인터넷에서 가져온 것입니다. 원본 작성자가 모든 권리를 보유합니다.</div>