什么时候需要清除浮动，清除浮动的方法

最新推荐文章于 2021-09-20 08:09:32 发布
最新推荐文章于 2021-09-20 08:09:32 发布
阅读量185 收藏
点赞数
分类专栏： HTML与CSS 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44699174/article/details/108116473
版权

什么时候需要清除浮动 ？

当子元素设置了float属性之后，且父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0)。详情如下图所示：
在这里插入图片描述

清除浮动的方式

1.在父元素内添加冗余元素clear:both;
在这里插入图片描述
在这里插入图片描述
2.在父元素中设置属性overflow:hidden||auto

乘风破浪PL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS清除浮动方法小结
09-24
本文主要介绍了CSS解决浮动，清除浮动的几种方法：1、设置父元素高度；2、overflow；3、增加子元素（块级），并且设置其clear属性值为both来解决（隔墙法、内墙法）；4、使用after或before伪对象清除浮动。下面跟着...
css布局时什么时候需要清除浮动以及清除浮动都有哪些方法？
qq_40859799的博客
10-08 4832
1、在以下情况下需要清除： 在对元素设置浮动时，元素就会脱离文档流，在css中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素，float主要流行与页面布局，使用之后没有清除就会后患无穷。 2、常用到清除方法： 第一种：使用空标签取出浮动； 第二种：父级div定义overflow：auto（注意：是父级div也就是这里的div.outer）； 第三种:after方法（作用于浮...
CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
zengyonglan的博客
11-23 1万+
2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法 ？ 一.什么时候需要清除浮动？我们对元素进行了浮动(float)时，我们的元素就会脱离文档流，像一只小船一样漂流在文档之上。 在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 float主要流行与页面布局，然后没有使用后没有清除浮动，就会后患无穷。知乎上截图： 分析HTML代码结构：<div
什么时候需要清除浮动，清除浮动都有哪些方法
zyfacd的博客
04-10 319
什么时候需要清除浮动 就是当子元素设置了float属性之后，且父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0) 清除浮动的方式: 1).给父元素添加声明overflow:hidden; 给父元素增加 overflow: hidden; 可以清除浮动的原理： 增加后，父元素会形成一个块级格式化上下文，即BFC，overflow: h...
为什么要浮动，什么时候需要清除浮动，清除浮动都有哪些方法
热门推荐
singerAngel
10-12 2万+
(1)为什么需要浮动 据网上资料显示，以前提出浮动的概念主要是为了解决左边图片，右边文字的需求，后来浮动在网页的布局中应用比较广泛。我之前在学习网页设计时，针对于一个花店的导航页，存在许多的图片显示，而有效并且美观的布局样式极为重要，这时float属性就显得尤为重要。 (2)什么时候需要清除浮动 浮动的属性虽然方便使用，但是在使用这种属性时，也存在着一种弊端，那就是当子元素设置了
清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
Fuohua的博客
07-22 882
什么时候要清除浮动 其实浮动float最开始出现的意义只是为了让文字环绕图片而已。但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。但这样做也会带来问题...... 我们希望看到这样的效果： 希望看到的效果 但结果却是这样： 实际的效果 这个时候，我们就要清除浮动带来的影响——父元素高度塌陷了。 这里引用张鑫旭大神观点： 撇开浮动的
CSS清除浮动常用方法小结
10-30
使用div+css（姑且这样叫，虽然我也不喜欢，但是叫什么呢？）布局的好处不用多说，经常性地会使用到float，那么清除浮动就是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。
css如何清除浮动常用的方法有哪些
09-25
如何清除浮动？css清除浮动的方法有很多，下面为大家介绍下常用的3种，需要的朋友可以了解下
CSS清除浮动方法总结
09-25
在阿里云首页看到很多div都有加上:before和:after的属性.但是大都只是做了类似的如下处理,请问这样的意义是什么呢?研究了一番，原来是清除浮动用的，下面来总结下清除浮动的几种方法吧
CSS清除浮动方法汇总
10-20
主要介绍了CSS清除浮动汇总的相关资料,需要的朋友可以参考下
请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
sjinsa的博客
04-28 1万+
为什么出现浮动？浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。什么时候清除浮动？ 如果想要实现三个块级元素并排显示，期望效果如下图所示： 给三个块级元素都加上float属性后，页面效果如下图所示： 问题出现了，父元素高度塌陷了一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-
为什么要清除浮动，什么时候要清除浮动，如何清除浮动
WEB_YH的博客
11-16 4640
众所周知，CSS中的定位机制分为，文档流，浮动和绝对定位。(今天不谈绝对定位)，如果对元素没有进行任何定位处理的话，元素应该处于文档流中，当我们对元素进行了浮动(float)时，我们的元素就会脱离文档流，像一只小船一样漂流在文档之上。首先来看一下浮动会带来哪些result. 第一：先看代码                效果： result ：1、父盒子的margi
CSS清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
sinat_36533893的博客
04-08 6890
CSS清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法  浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用
清除浮动的方法总结&CSS实现水平垂直居中方法总结
一位不知名小前端的一些笔记
02-26 1万+
1、清除浮动的方法总结 当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现，就需要清楚浮动。  清楚浮动的方法： ①：定义父级div的高度。 ②：添加一个空div，利用css提供的clear:both清除浮...
CSS3清除浮动 保持浮层水平垂直居中
splendid_can的博客
11-26 2484
1）清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法     1、在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行清除浮动。     2、清除浮动的方法：  
为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？
weixin_43912081的博客
09-20 891
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮再文档流得块框上。 浮动带来的问题： 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素（内联元素）会跟随其后 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构 清除浮动的方式： (1)、父级div定义 height 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 优点：简单、代码少、容
为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
最新发布
06-28
### 回答1： 浮动是由CSS中的布局元素之一的float属性引起的。当float属性设置为left或right时，元素会像漂浮在文本流中一样移动，并允许其他元素在其周围进行布局。但是，由于浮动元素的位置不在文本流中，它们可能与其他元素重叠，因此需要使用清除浮动技术来解决这个问题，例如使用clear属性或overflow属性来清除浮动。 ### 回答2： 浮动是 CSS 中一种特殊的布局方式，当给一个元素设置了浮动属性（float），该元素会脱离文档流并向左或右浮动到其父元素或祖先元素的边缘。浮动的主要作用是实现多列布局、图片环绕文字等效果。 浮动出现的原因是为了解决网页布局多列的问题，比如在同一行显示多张图片或者文章、图片并排。以前的网页布局方式通常是使用表格或者定位来实现，但这样做会导致 HTML 结构的臃肿，同时也不够灵活。因此，浮动的出现给网页布局带来了新的思路。 需要清除浮动的情况有以下几种： 1. 父元素没有设置高度，子元素设置了浮动属性，但是子元素高度超出了父元素，导致父元素高度为 0，这时就需要清除浮动； 2. 父元素没有设置高度，而且只是简单的使用 margin-top 的方式给下一个元素空出空间，这种情况需要清除浮动； 3. 当一个浮动元素后面有多个没有浮动属性的块级元素时，由于浮动元素的高度已经脱离文档流，会导致后面的块级元素直接跟在浮动元素后面，造成布局混乱，这时也需要清除浮动。 清除浮动的方式有以下几种： 1. 使用 clear 属性。在浮动元素的下一个块级元素中添加 clear 属性，该属性有两个取值：left、right、both，分别表示要清除浮动元素的左浮动、右浮动或两者都清除。例如：设置 clear: both; 表示清除浮动元素的左右浮动。 2. 使用伪元素。在浮动元素的父元素中设置 ::after 伪元素，并给该元素添加 clear 属性。例如：设置 .clearfix::after { content: ""; display: block; clear: both; }，其中 .clearfix 是父元素的类名。 3. 父元素使用 overflow 属性。在浮动元素的父元素中设置 overflow: hidden; 或 overflow: auto; 即可清除浮动。 总之，清除浮动是为了保证页面布局的正确性和美观性，需要根据具体情况进行选择。 ### 回答3： 浮动出现的原因是因为在HTML和CSS中，元素是按照从左到右、从上到下的顺序排列的，但是当元素的宽度超过其父元素的宽度时，父元素就无法容纳子元素了。这时，如果使用浮动，子元素就可以脱离文档流而不被父元素挤出页面，变成浮动状态。浮动有左浮动、右浮动和双侧浮动等。 需要清除浮动的情况有以下几种： 1. 父元素没有设置高度或者宽度，子元素设置了浮动，那么父元素将没有高度及宽度，影响布局。 2. 相邻元素的排列会被浮动元素影响，导致布局错误。 3. 当浮动元素的高度大于相邻元素 高度时，相邻元素会被覆盖。 清除浮动的方式有以下几种： 1. 父元素设置overflow为hidden或者auto，这样就可以清除子元素的浮动。 2. 使用clear:both或clear:left或clear:right来清除浮动，可以把之前的浮动清除掉，但是这种方式要用在最后一个浮动元素后面，否则会影响布局。 3. 使用:after伪类来清除浮动，这种方式也要写在浮动元素的后面，类似于clear方式。 综上所述，清除浮动是为了避免因为浮动导致页面布局错乱等问题，在设计页面时应当注意尤其是在涉及到浮动的区域。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乘风破浪PL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值