Maison interface Web tutoriel HTML 常用的CSS清除浮动的方法优缺点分析(个人学习笔记)_html/css_WEB-ITnose

常用的CSS清除浮动的方法优缺点分析(个人学习笔记)_html/css_WEB-ITnose

Jun 24, 2016 am 11:19 AM

一、抛一块问题砖(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>

  • 原理:IE8以上和非IE浏览器才支持:after,zoom(IE转有属性)可解决ie6,ie7浮动问题。其中clear:both;指清除所有浮动;content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少,其中content()可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清楚浮动。
  • 优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
  • 缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
  • 建议:推荐使用,建议定义公共类,以减少CSS代码。(相对于空标签闭合浮动的方法代码似乎还是有些冗余,通过查询发现Unicode字符里有一个“零宽度空格”,也就是U+200B,这个字符本身是不可见的,所以我们可以考虑省略掉 visibility:hidden )
  • 评分:★★★★☆
  • 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>

  • 原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
  • 优点:简单,代码少,浏览器支持好,不容易出现怪问题
  • 缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空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>

  • 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
  • 优点:简单,代码少,浏览器支持好
  • 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏,无法显示需要溢出的元素
  • 建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
  • 评分:★★★☆☆
  • 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>

  • 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
  • 优点:简单,代码少,浏览器支持好
  • 缺点:内部宽高超过父级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>

  • 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题
  • 优点:代码简洁
  • 缺点:高度被固定死了,只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
  • 建议:不推荐使用,只建议高度固定的布局时使用
  • 评分:★★☆☆☆
  • 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

    Outils d'IA chauds

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    Video Face Swap

    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

    Guide de construction d'Agnes Tachyon | Un joli Musume Derby
    2 Il y a quelques semaines By Jack chen
    Oguri Cap Build Guide | Un joli Musume Derby
    2 Il y a quelques semaines By Jack chen
    Péx: comment raviver les joueurs
    4 Il y a quelques semaines By DDD
    Guide de construction de Grass Wonder | Uma musume joli derby
    1 Il y a quelques semaines By Jack chen
    Pic comment émoter
    3 Il y a quelques semaines By Jack chen

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Comment minimiser la taille des fichiers HTML? Comment minimiser la taille des fichiers HTML? Jun 24, 2025 am 12:53 AM

    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.

    Comment HTML a-t-il évolué au fil du temps et quels sont les étapes clés de son histoire? Comment HTML a-t-il évolué au fil du temps et quels sont les étapes clés de son histoire? Jun 24, 2025 am 12:54 AM

    HtmlhaseVolvedSIGNICALYSICMANTSICTHER

    Comment utiliser l'élément  pour représenter le pied de page d'un document ou d'une section? Comment utiliser l'élément pour représenter le pied de page d'un document ou d'une section? Jun 25, 2025 am 12:57 AM

    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.

    Comment utiliser l'attribut tabindex pour contrôler l'ordre des éléments des onglets? Comment utiliser l'attribut tabindex pour contrôler l'ordre des éléments des onglets? Jun 24, 2025 am 12:56 AM

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

    Comment créer des zones de texte en HTML à l'aide de l'élément ? Comment créer des zones de texte en HTML à l'aide de l'élément ? Jun 25, 2025 am 01:07 AM

    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.

    Quelle est la déclaration , et que fait-elle? Quelle est la déclaration , et que fait-elle? Jun 24, 2025 am 12:57 AM

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

    Comment utiliser les éléments  et  pour fournir une légende pour une image? Comment utiliser les éléments et pour fournir une légende pour une image? Jun 24, 2025 am 12:45 AM

    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.

    Quels sont les formats de fichiers vidéo pris en charge (par exemple, MP4, WebM, OGG)? Quels sont les formats de fichiers vidéo pris en charge (par exemple, MP4, WebM, OGG)? Jun 23, 2025 am 12:48 AM

    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.

    See all articles