常用的CSS清除浮动的方法优缺点分析(个人学习笔记)_html/css_WEB-ITnose
一、抛一块问题砖(display: block)先看现象:
分析HTML代码结构:
<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div></div>
分析CSS代码样式:
.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}.div1{width: 80px;height: 80px;background: red;float: left;}.div2{width: 80px;height: 80px;background: blue;float: left;}.div3{width: 80px;height: 80px;background: sienna;float: left;}
这里没有给最外层的DIV.outer 设置高度,但是我们知道如果它里面的元素不浮动的话,那么这个外层的高是会自动被撑开的。但是当内层元素浮动后,就出现了一下影响:
(1):背景不能显示 (2):边框不能撑开 (3):margin 设置值不能正确显示
当一个内层元素是浮动的时候,如果没有关闭浮动时,其父元素也就不会再包含这个浮动的内层元素,因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了!
解决办法如下(使用其他代码示例):
1、父级div定义伪类:after和zoom
<style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} /*清除浮动代码*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1} </style> <div class="div1 clearfloat"> <div class="left">Left</div> <div class="right">Right</div> </div><div class="div2"> div2 </div>
2、结尾处加空div标签clear:both
<style type="text/css"> .div1{background:#000080;border:1px solid red} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} /*清除浮动代码*/ .clearfloat{clear:both} </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div><div class="clearfloat"></div></div><div class="div2"> div2 </div>
3、父级div定义overflow:hidden
<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div></div><div class="div2"> div2 </div>
4、父级div定义overflow:auto
<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div></div><div class="div2"> div2 </div>
5、父级div定义height
<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div><div class="div2"> div2 </div>

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

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.

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)

Sujets chauds

Pour réduire la taille des fichiers HTML, vous devez nettoyer le code redondant, compresser le contenu et optimiser la structure. 1. Supprimer les balises, commentaires et blancs inutilisés pour réduire le volume; 2. Déplacer en ligne CSS et JavaScript vers des fichiers externes et fusionner plusieurs scripts ou blocs de style; 3. Simplifiez la syntaxe d'étiquette sans affecter l'analyse, comme l'omission de balises fermées en option ou l'utilisation d'attributs courts; 4. Après le nettoyage, activez les technologies de compression côté serveur telles que GZIP ou Brotli pour réduire davantage le volume de transmission. Ces étapes peuvent améliorer considérablement les performances du chargement des pages sans sacrifier les fonctionnalités.

HtmlhaseVolvedSIGNICALYSICMANTSICTHER

Il s'agit d'une balise sémantique utilisée dans HTML5 pour définir le bas de la page ou du bloc de contenu, comprenant généralement des informations sur le droit d'auteur, des informations de contact ou des liens de navigation; Il peut être placé en bas de la page ou imbriqué, etc. Tags comme fin du bloc; Lorsque vous l'utilisez, vous devez prêter attention pour éviter des abus répétés et un contenu non pertinent.

ThetabindexAttributeControlShowElementsReceiveFocusViAThetAbkey, withThreemainValues: tabindex = "0" addSanElementTotheNaturalTaborder, tabindex = "- 1" Autorise le programme

Pour créer des zones de texte HTML, utilisez des éléments et personnalisez-les via les attributs et le CSS. 1. Utilisez la syntaxe de base pour définir la zone de texte et définir des propriétés telles que les lignes, les cols, le nom, l'espace réservé, etc.; 2. Vous pouvez contrôler avec précision la taille et le style via CSS, tels que la largeur, la hauteur, le rembourrage, la bordure, etc .; 3. Lors de la soumission du formulaire, vous pouvez identifier les données via l'attribut de nom et vous pouvez également obtenir la valeur du traitement frontal.

Adeclarationisaformalstatementthatsomethingistrue, officiel, orrequired, a utilisétoclelydefineorannneanintent, fact, orrule.itplaysakeyroleinprogrammingydefiningVariblesandfunctions, inlegalcontextsbyreportingfactsunderroath, etIndailyLifeMakeintenti et

La façon standard d'ajouter des titres aux images en HTML est d'utiliser et d'éléments. 1. L'utilisation de base est d'envelopper l'image dans la balise et d'ajouter un titre à l'intérieur, par exemple: c'est le titre de l'image; 2. Les raisons de l'utilisation de ces deux balises incluent une sémantique claire, un contrôle de style pratique et une forte accessibilité, ce qui aide les lecteurs du navigateur, du robot et de l'écran à comprendre la structure du contenu; 3. Les notes incluent qu'il peut être placé de haut en bas mais doit maintenir l'ordre logique, ne peut pas remplacer l'attribut ALT et peut contenir plusieurs éléments multimédias pour former une unité entière.

Les formats vidéo généraux les plus courants incluent MP4, WebM et Ogg, parmi lesquels 1. MP4 peut être lu sur presque tous les appareils et plateformes, en particulier en charge nativement par des systèmes de téléphonie mobile (tels que iOS et Android), adaptés au tournage, au téléchargement et à l'édition; 2. WebM et OGG sont recommandés pour les pages Web, qui sont toutes deux des formats open source et conviennent à la lecture en ligne. WebM fonctionne bien dans Chrome, tandis que OGG convient à Firefox et Safari; 3. Bien que certaines plates-formes telles que Douyin et YouTube prennent en charge plusieurs formats, il est recommandé de télécharger MP4 pour garantir la compatibilité et faire attention aux paramètres de codage et aux limitations de résolution.
