清除浮动的几种方式，各自的优缺点

最新推荐文章于 2024-05-13 01:51:59 发布
最新推荐文章于 2024-05-13 01:51:59 发布
阅读量3.1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24193261/article/details/51592699
版权

1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)
凉川望远
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS清除浮动的常用方法优缺点分析
09-27
为了解决这个问题，开发者通常会采用几种不同的清除浮动（clear float）方法。下面我们将详细探讨这些方法的优缺点。 1. **额外元素法** 这种方法是在浮动元素后面添加一个额外的非浮动元素，如`...
清除浮动的五种方法以及优缺点
zz130428的博客
12-14 1015
clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。：添加许多无意义的标签，结构化比较差。：符合闭合浮动思想，结构语义化正确。：通俗易懂，书写方便。
清除浮动常用的四种方法及优缺点
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
03-12 2030
清除浮动主要是解决父级元素因为子级浮动引起的内部高度为0的问题。 1.额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 （不推荐使用） 优点：通俗易懂，书写方便。 缺点：*添加许多无意义的标签，结构化比较差。 2.父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。但是必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 优点： 简单、代码少、浏览器支持好 缺点： 内容增多时候容易造成不会自动换行导致内
2024年前端最全最详细的JS动态创建表格以及实现分页!(2)，金三银四前端面试的一些感受
最新发布
2401_84619467的博客
05-13 399
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
CSS清除浮动方法大全
11-28 209
这篇文章主要介绍了CSS清除浮动方法大全(小结)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 1、父级div定义伪类：after和zoom ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Left Right div2 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(I...
前端面试题
weixin_30258027的博客
03-18 2002
$HTML， HTTP，web综合问题 1、前端需要注意哪些SEO？ 合理的title、description、keywords、语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页 重要内容HTML代码放在最前，重要内容不要用js输出：爬虫不会执行js获取内容 少用iframe：搜索引擎不会抓取iframe中的内容 非装饰性图片必须加alt 提高网站速度 ...
CSS清除浮动的方法以及优缺点
NaiSiWangZai的博客
09-05 284
CSS清除浮动的方法以及优缺点 height：父元素设置高度 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 优点：简单、代码少、容易掌握 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用 /* 高度清除浮动 */ div{ height: 300px; ...
清除浮动的几种方法详解
09-24
以下是对清除浮动的几种常见方法的详细解析： 1. **第一种方法：使用`clear: both`** 这是最传统的清除浮动方式，通过在父元素上设置`clear: both`，阻止了父元素内的后续元素与浮动元素相邻。但是这种方法需要...
清除浮动的几种方法.md
07-27
清除浮动的几种方法.md
清除浮动的几种方法(推荐)
09-24
下面我们将详细讨论几种常见的清除浮动的方法。 1. **添加空元素**： 这是最传统的方法之一，即在浮动元素之后添加一个空的HTML元素，如`<div>`，并为其设置CSS样式`clear:both`。这将迫使该空元素下方的任何内容...
css清除浮动的几种方法以及对应规范说明
09-25
以下是对清除浮动的几种方法及其规范说明的详细解释： 1. **使用`clear:both`** 当一个元素设置`clear:both`时，这个元素会向下移动，直到它不在与任何浮动元素相邻。这通常用于浮动元素之后的非浮动元素，或者在...
CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）
weixin_38326893的博客
07-20 135
css之浮动布局 本人博客：查看文章 1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置 2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认） 4.浮动的影响： 对附近的元素布局造成改变，使得布局混乱 浮动后的元素可.
前端面试题--2016.10.09
张明的博客
10-09 678
HTML+CSS 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性； 2.xhtml和html有什么区别 HTM
CSS之浮动布局（float，浮动原理，清除/闭合浮动方法） css之浮动布局
abc1884450的博客
03-23 208
1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置 2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认） 4.浮动的影响： ...
CSS清除浮动的8种方法以及优缺点
lzwya的博客
04-17 167
在CSS中清除浮动的常用方法以及优缺点（8种） 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。 下面总结8种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法...
CSS利用浮动和清除浮动进行布局
yeana1的博客
07-15 2140
「内容简介」CSS有三种基本定位方式：正常流（static），浮动（float），绝对定位（absolute、fixed）。 HTML元素默认采取正常流的方式进行布局，而浮动是HTML布局中最常用的定位方式。  下面先探讨浮动定位的行为，然后介绍一个需要清除浮动的场景，以及几种替代方案。 浮动 浮动元素会向左/右偏移，直至外边界碰到容器或另一个元素的边缘。 浮动会使得元素脱离
web前端面试题总结（html、css）
diliuzui7882的博客
08-13 357
1.对 WEB 标准以及 W3C 的理解与认识？ 　　参考： 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、 结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提 供打印版本而不需要复制内容、提高网站易用性。 2.xhtml 和...
CSS清除浮动的四种常用方法及其优缺点
Moony_wy的博客
01-30 957
什么是CSS清除浮动？ 在非IE浏览器下，当容器的高度为auto（没有设置），且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 CSS四种常用的清除浮动方法：额外标签法清除浮动；父级添加overflow: hidden清除浮动; 父级添加after伪元素清除浮动；父级添加双伪元素清除浮动。
清除浮动的最常用的四种方法，以及优缺点
热门推荐
h_qingyi的博客
07-29 28万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 2.当我给内部两个盒子加上float属性的时候 顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了   总结...
css中清除浮动的几种方式
04-05
1. 使用clear属性，给浮动元素的下一个元素添加clear属性，可以清除浮动。例如：clear:both; 2. 使用overflow属性，给浮动元素的父元素添加overflow属性，可以清除浮动。例如：overflow:hidden; 3. 使用伪元素：在浮动元素的父元素中添加一个空的伪元素，使用clear属性清除浮动。例如：.clearfix::after {content:""; display:block; clear:both;} 4. 使用display属性，给浮动元素的父元素添加display属性为inline-block或table，可以清除浮动。例如：display:inline-block; 或 display:table; 5. 使用float属性，给浮动元素的父元素添加float属性，可以清除浮动。例如：float:left; 或 float:right;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值