为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？

最新推荐文章于 2023-02-06 13:50:09 发布
最新推荐文章于 2023-02-06 13:50:09 发布
阅读量144 收藏
点赞数
文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WY_ALA/article/details/128833494
版权

为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素（内联元素）会跟随其后
  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

  • 父级div定义height
  • 最后一个浮动元素后加空div标签 并添加样式clear:both。
  • 包含浮动元素的父标签添加样式overflow为hidden或auto。
  • 父级div定义zoom
WY_ALA
关注
浮动布局有哪些优点？有什么缺点？清除浮动有哪些方式？
越陌度阡
11-10 1454
浮动布局简介：当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。 1. 浮动布局的优点 浮动布局优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质，例如可以设置宽高等。但它与inline-block还是有一些区别的，第一个就是横向排序的时候，float可以设置方向而inline-block方向是固定的；第二就是inl.
css之浮动——浮动的概念、为什么清除浮动？清除浮动的方式
bailizx
03-19 290
目录 1 为什么浮动（float）？ 2 为什么清除浮动？ 3 清除浮动的几种方式 1）父级元素（包含块）定义 height 2）父级元素添加overflow属性（父元素添加overflow:hidden） 3）添加空白（没有任何内容）标签 4）after伪元素清除浮动 1 为什么浮动（float）？ 浮动（float）最初仅仅是为了让内容环绕在浮动元素周围，后来利用它的特点逐渐...
请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
sjinsa的博客
04-28 1万+
为什么出现浮动？浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。什么时候清除浮动？ 如果想要实现三个块级元素并排显示，期望效果如下图所示： 给三个块级元素都加上float属性后，页面效果如下图所示： 问题出现了，父元素高度塌陷了一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-
为什么要浮动，什么时候需要清除浮动，清除浮动都有哪些方法
热门推荐
singerAngel
10-12 2万+
(1)为什么需要浮动 据网上资料显示，以前提出浮动的概念主要是为了解决左边图片，右边文字的需求，后来浮动在网页的布局中应用比较广泛。我之前在学习网页设计时，针对于一个花店的导航页，存在许多的图片显示，而有效并且美观的布局样式极为重要，这时float属性就显得尤为重要。 (2)什么时候需要清除浮动 浮动的属性虽然方便使用，但是在使用这种属性时，也存在着一种弊端，那就是当子元素设置了
为什么会出现浮动？为什么要清除浮动？清除浮动的几种方法？
weixin_61738415的博客
02-06 295
为什么会出现浮动？为什么要清除浮动？清除浮动的几种方法？
清除页面浮动
weixin_54418006的博客
11-27 294
1. 为什么要清除浮动呢？ 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。 2. 清除浮动本质 清除浮动的本质是清除浮动元素造成的影响 如果父盒子本身有高度，则不需要清除浮动 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了 3. 清除浮动 语法： 选择器{clear:属性值;} 属性值 描述 left
为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
最新发布
06-28
浮动是由CSS中的布局元素之一的float属性引起的。...但是，由于浮动元素的位置不在文本流中，它们可能与其他元素重叠，因此需要使用清除浮动技术来解决这个问题，例如使用clear属性或overflow属性来清除浮动。
页面布局时为什么会出现浮动？如何清除浮动？
06-06
但是，浮动元素的脱离文档流可能会导致一些问题，比如元素高度塌陷、元素重叠等，这时候需要清除浮动。 清除浮动的方法有多种，最常用的方法是添加一个空 div 元素，并设置 clear 属性。例如： ```html ;"> ``` ...
浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么
09-25
因此，我们需要“清除浮动”或者说“闭合浮动”，以确保容器能够正确包裹其内的浮动元素。常见的清除浮动方法包括： 1. 添加额外的标签：在浮动元素后面插入一个带有`clear:both`样式的空`div`，这样可以创建一个新...
为什么要清除浮动？清除浮动的方式？
小花猫哒小栗子
06-03 2942
清除浮动是为了清除使用浮动元素产生的影响：浮动的元素，高度会塌陷，而高度的塌陷使我们页面后i按的布局不能正常显示。 清除浮动的方式： 1、额外标签法：给谁清除浮动，就在其后额外添加一个空白标签。 优点：通俗易懂，书写方便。 缺点：添加许多无意义的标签，结构化比较差。 2、父级添加overflow方法：可以通过触发BFC的方式，实现清除浮动的结果。 优点：代码简洁，慎用，若该父盒子里还有position定位会引起麻烦。 缺点：内容增加多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。 ove.
前端高频面试题：CSS为什么要清除浮动？如何清除浮动？
一只蒻蒻的博客
02-20 331
CSS为什么要清除浮动？如何清除浮动？ 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。清除浮动的本质是清除浮动元素造成的影响，清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。 清除浮动的方法有： 1.clear:both; 在浮动元素末尾添加一个空的标签，这个标签必须为块级元素。然后将其设置clear:both,这样就可以清除浮动。 **优点：**简单易懂，方便。 **缺点：**添加了无意义
浮动的概念作用特点产生浮动的原因和清除浮动的方法
weixin_50659023的博客
09-10 4914
一， 浮动float CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中浮动让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 什么是浮动(float) 概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置。 作用： 让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。 可以实现盒子的左右对齐等等. 浮动最早是用来控制图片，实现文字环绕图片的效果。 语法： 选择器 { float: 属性值; } 浮动的特点 清除概念的方法
为什么要浮动，为什么要清除浮动，清除浮动的方式有哪些？
Andrelia的博客
09-16 823
一、为什么要浮动？ 据网上资料显示，以前提出浮动的概念主要是为了解决左边图片，右边文字的需求，后来浮动在网页的布局中应用比较广泛。我之前在学习网页设计时，针对于一个花店的导航页，存在许多的图片显示，而有效并且美观的布局样式极为重要，这时float属性就显得尤为重要。 二、为什么要清除浮动？ 浮动的属性虽然方便使用，但是在使用这种属性时，也存在着一种弊端，那就是当子元素设置了float属性之后，且父...
CSS清除浮动4种方法及详细解析
SpringRolls的博客
05-02 440
问题所在：子盒子浮动导致父盒子的内高度为0，父级盒子不能被撑开，发生高度坍塌的情况。如下图所示： 答案： 1. 给父级元素设置合适的高度，手动撑开 2. 给父元素添加样式 overflow:hidden/auto （这个属性相当于触发BFC，让父级紧贴内容，包括使用了浮动的盒子） 3. 在浮动元素结尾增加空的div盒子，添加样式 clear:both 4. 给父元素添加伪类 :aft...
css布局时什么时候需要清除浮动以及清除浮动都有哪些方法？
qq_40859799的博客
10-08 4895
1、在以下情况下需要清除： 在对元素设置浮动时，元素就会脱离文档流，在css中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素，float主要流行与页面布局，使用之后没有清除就会后患无穷。 2、常用到清除方法： 第一种：使用空标签取出浮动； 第二种：父级div定义overflow：auto（注意：是父级div也就是这里的div.outer）； 第三种:after方法（作用于浮...
面试题22：为什么需要清除浮动？清除浮动的方式
qq_51066068的博客
04-26 2267
面试官：请问为什么需要清除浮动？清除浮动的方式 浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。 浮动的工作原理： 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象） 浮动元素碰到包含它的边框或者其他浮动元素的边框停留 浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的.
[css] 为什么会出现浮动？在什么时候需要清除浮动呢？
歌谣的博客
02-20 1928
[css] 为什么会出现浮动？在什么时候需要清除浮动呢？ 因为在 div + css 代替 table 布局之后，利用 float 很容易进行一些自适应的布局，比如双飞燕和圣杯布局。当然，float 原本的用途就是用来进行文字环绕图片的，当有此需求时，应该使用 float 但是使用 float 之后，由于内部的元素脱离了文档流导致外层包裹元素高度塌陷。此时就需要清除 float 造成的影响。一般使用 clear:both 或者外层触发 BFC。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值