关于清除浮动

最新推荐文章于 2025-05-30 09:55:02 发布
最新推荐文章于 2025-05-30 09:55:02 发布
阅读量175 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_48306060/article/details/124202319
版权
本文介绍了浮动的概念，即元素脱离文档流并按指定方向移动，用于解决水平布局问题。当元素浮动后，父级元素可能会因无法检测到子级高度而无法撑开。为了解决这个问题，文章提出了两种解决方案：一是给父级设置固定高度，但这可能影响拓展性；二是使用`overflow:hidden`来隐藏超出的内容，从而闭合浮动。这两种方法都是常见的清除浮动技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

什么是浮动

清除浮动

清除浮动的原因：

解决方案：

在父级使用height （拓展性不太好 ）

在父级使用overflow：hidden

什么是浮动

元素脱离文档流，按照指定方向发生移动，遇到父级边界换行。

解决水平布局问题

清除浮动

div中有三个p标签 没有使用浮动时如图

给p标签写上

p {

            float: left;

        }

如图

清除浮动的原因：

元素使用浮动后脱离文档流，父级元素检测不到子级的存在，高度无法撑开 

解决方案：

在父级使用height （拓展性不太好 ）

在父级使用overflow：hidden

酥皮小熊
关注
关于清除浮动的五种方法
weixin_39150852的博客
09-19 965
清除浮动的本质：为了解决父级元素印子级浮动引起内部高度为0的问题。 方式1:额外标签法（w3c推荐的方法）： 在最后一个浮动标签后，新添加一个标签 优点：通俗易懂，书写方便。 缺点：添加许多无意义的标签，结构化较差。 .clear{ 　　　clear:both; } 方式2:父级添加overflow属性方法 .father{ 　　　overflow:hidden;overfl...
html5中怎么清除浮动,h5关于清除浮动的操作学习讲解
weixin_34722157的博客
06-18 465
不设置浮动的效果图：box1设置了浮动后：clear: left之后可还原到 不设置浮动的效果图box1 box2都设置了浮动的效果图box3清除所有浮动：clear: both效果图.box1{width: 100px;height: 100px;background-color: yellow;/** 设置box1向左浮动*/float: left;}.box2{width: 200px;he...
关于清除浮动的方法
Lzxggg的博客
11-17 186
1.先来一种最简单的方法 overflow:hidden; 2.利用在css里面写的 类 clearfix 来清除 代码如下 .clearfix:after{ visibility:hidden; display:block; font-size:0; content: ” “; clear:both; height:0; } .clearfix{*zoom:1;} //这个是...
关于清除浮动的理解（个人理解）
F2691898750的博客
07-09 637
总所周知，子元素浮动会导致父元素高度塌陷，影响后续布局，出现布局重叠混乱等问题。清除浮动的作用就是使父元素拥有高度，不影响后续布局。清除浮动有五种方法，而大部分初学者常用的方法是给父元素加浮动。但这样会造成更大的浮动问题，导致一旦遇到结构复杂的情况时就会样式混乱。而使用伪元素清除浮动的意义，就是清除浮动之后，父元素拥有了高度，哪怕在之后不再使用浮动，也不会导致页面混乱，结构坍塌，后面所写的布局仍然是稳定正常的。这也是伪元素清除浮动最好用的原因，可以提前在公共样式中写好，之后直接添加类名使用伪元素清除浮动即可
关于清除浮动的方法总结
huahua123mh的博客
08-07 258
一、为什么要清除浮动？
关于清除浮动的细节
susuxhsji的博客
04-18 103
清除浮动 今天在做项目时，使用清除浮动时，遇到了一个问题；我先用额外标签法清除浮动，但没有效果，然后又用了双伪元素法清除浮动，但依旧没有效果。可这个方法之前用就有效果，现在却不行。 我查了一下，发现是因为我想要清除浮动的元素使用的不是clearfix类名 然后我又试着用clearfix类名竟然真的成功了 那么为什么之前没用clearfix作为类名却能成功呢？ ...
关于清除浮动的四种方法
csl125的博客
01-17 367
浮动对页面的影响：　　　　如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，　　　　下面的元素会自动补位，所以这个时候要进行浮动的清除。关于清除浮动的方式:　　方式一:使用overflow属性来清除浮动.ovh{ 　　　　overflow:hidden; 　　 }先找到浮动盒子的父元素，再在父元素中添加一个属性：over
关于清除浮动与闭合浮动
11-22 136
　　　在给HTML添加样式的构成中，css是必不可少的的，然而css中有一些功能的实现可以通过不同的方法实现，通过效果查看好像并没有什么不同，那它们之间到底有什么本质区别呢，又有哪些概念被我们无意的忽略或者无视了呢，突然想总结总结这一类的问题，本篇随笔算是本人对于“清除浮动”的归纳吧. 　　　 为什么要清楚浮动 在布局的时候我们经常希望某些内容能够水平排布，水平排布后，由于内部内...
CSS关于清除浮动的方法
weixin_42396868的博客
09-19 195
1.给子元素设置float，然后给父元素设置overflow：hidden；则可以清除浮动 2.伪类清除法（三步走）： 2-1.不论是before还是after必须的属性是content：‘’即使是空，也必须写。 2-2.给display设置block块级元素属性。因为伪类默认的display属性是inline内联式 2-3.设置clear属性为both（左右） ...
关于li:hover的怎么清除浮动问题实现代码
09-25
需要注意的是，在处理浮动问题时，可能会使用到清除浮动的技术，比如使用.clearfix类，或设置overflow属性，但本例中主要是通过改变布局方式来解决浮动问题。在其他情况中，如果仍然需要使用float属性而不希望影响...
关于CSS Hack与float闭合的CSS技巧 清除浮动代码
09-25
总结来说，CSS Hack 主要用于解决不同浏览器之间的兼容性问题，而清除浮动则是为了避免布局中出现的各种问题。以上介绍的方法是目前较为常见且有效的技巧。希望这些知识点能帮助你在实际开发中更加得心应手。
前端实现图片压缩：基于 HTML5 File API 与 Canvas 的完整方案
m0_51768044的博客
05-28 1052
本文将详细讲解如何通过<input type="file">实现图片上传，结合 Canvas 实现图片压缩，并实时展示压缩前后的图片预览和文件大小对比。
用HTML5+JavaScript实现汉字转拼音工具
cnds123的专栏
05-23 1046
用HTML5+JavaScript实现汉字转拼音工具
HTML5实现简洁的端午节节日网站源码
最新发布
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
05-30 1万+
HTML5实现简洁的端午节节日网站源码，酷炫的大气简洁端午节节日网页源码，酷炫的大气简洁端午节节日网页源码模板，HTML酷炫的大气简洁端午节节日网页源码，内置酷炫的动画，界面干净整洁，页面主题清晰，页面模板示例规范，可以根据板块定义自己主题内容，全方位介绍内容，可以拆分多个想要的页面，可以扩展自己想要的，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
HTML5 视频播放器：从基础到进阶的实现指南
weixin_41544125的博客
05-28 859
通过CSS和JavaScript，可以创建一个自定义的播放控制栏，以满足特定的设计需求。bottom : 0;});});});bottom : 0;});});});bottom : 0;});});});bottom : 0;});});});bottom : 0;
HTML5基础
m0_62696265的博客
05-28 453
如在同文件夹的img中有1.webp格式的图片，举例： 举例： 图片找不到，alt和title也没有的话就只显示一个烂图标，一般alt是必加的如果将元素用红框框起来，则会发现：
float：left清除浮动
04-16
嗯，用户想知道如何在CSS中清除float:left导致的浮动问题，以及相关的清除浮动方法。首先，我需要回忆一下关于CSS浮动的知识。根据引用[1]到[5]，清除浮动的方法主要有几种，比如使用clear属性、伪元素清除法、父...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值