摘要：浮动的理解什么是浮动概念浮动是指的是的属性。对于设置了浮动的元素，在页面效果上可以通俗的理解为这个元素漂起来了在水上，位置发生变化，不按代码中排列。关于浮动，后续会总结以下消除浮动影响的相关内容。
css浮动的理解 什么是“浮动” 概念
浮动是指的是css的属性float。对于设置了浮动的元素，在页面效果上可以通俗的理解为“这个元素漂起来了（在水上）”，位置发生变化，不按HTML代码中排列。从定义上理解，即该元素脱离了文档流（常规流）。
以下是MDN web docs中关于浮动的描述：
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。效果
从两张图片简单的看以下浮动的效果：
a在容器中是块级元素，占据一整行的位置（父级的全部宽度），后续的文字排列在其下方。
给a添加上float: left;，后续的文字紧跟a排列。
浮动对布局的影响从上面的图片例子直观的了解了浮动后，我们来仔细看看，浮动对于布局的影响。
浮动元素对兄弟元素的影响：当兄弟元素是块级元素，浮动元素不会影响其布局。
块a浮动后，块b仍然占据一整行。视觉上，即块a浮到了块b的上一层。
当兄弟元素是行内元素，它的布局会收到浮动元素的影响。
将“float CSS”放在span标签中，发现其位置和后续的文本一样，被浮动的块a“顶开了”。
当父级元素是行内元素，浮动效果如下：
产生了和兄弟行内元素一样的效果。
所以，在使用浮动的时候，父级元素一般不要使用行内元素，避免造成不必要的麻烦。
当父级元素是块级元素。我们先看没有浮动的情况：
对比加了浮动之后，
很明显的能发现，浮动元素对于父级最大的影响在于，不能“撑开”父级元素。
对于多个浮动元素（浮动方向一致），在布局上就是单纯的按照元素在HTML代码中的顺序依次摆放。这里要说的是，在摆放中的一些规则。
块a、b和c同为向左浮动的元素，它们横向依次排列。当我们尝试增加块c的宽度到超过父级的限制时，块c就挪到了块a、b的下方。可以简单的理解为，a、b所在的“第一行”已经放不下c了，所以把c靠着左边（浮动方向）放到“下一行”。可以把这个规则略微粗暴的归纳为：换行。
这里将的“行”的概念并不是真正指一整行的空间，是个抽象概念。
另一种情况，我们不增加c的宽度，而是在块c之后加上块d。
这就会很奇怪，根据上面的归纳，块d不该放到“下一行”吗？
所以，另一条规则就是：上移。但是，仅仅是单纯的上移是不准确的，我们看下面的情况：
可以看到，虽然块a下方仍有控件，但是块d不会上移去填补这部分空白，并且，块d始终是处于块c的下方的，即块d的顶部始终不超过块c的底边。
对于上移规则的限制，可以说不超过前一个浮动元素
综上，浮动元素的摆放规则可总结为：
水平方向上，靠左（根据浮动方向）依次摆放
摆不下，摆下一行
换行后，尽量上移，但不能超过前一个浮动元素的底边
浮动的运用用浮动来实现布局，比如，商品的展示页面，
侧导航栏等等。
总的来说，浮动的使用是为了改变元素的位置（其实更贴切来说应该是顺序），使其按照我们所想的摆放在页面上，因此浮动广泛用于页面的布局之上。在CSS新加入Flex（弹性）布局之后，由于便于操作，在实现布局上会选择Flex来实现，但浮动运用依旧广泛。具体就要看我们在开发过程中的需求和自己的选择了。
再讲两句在梳理这些知识之前，虽说知道了浮动是怎么回事，但始终没有把它统一的归纳起来，自己捋一遍，才发觉其中确实有一些值得好好推敲的细节。能力和经验有限，理解不一定能准确到位，在网上看了相关的资料和视频后，决定写下这篇文章，看看自己是不是真的理解了这个东西。
关于浮动，后续会总结以下消除浮动影响的相关内容。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112997.html
摘要：那我们举个栗子当先声明一个元素向左浮动时，由于脱离文档流，这个元素的右边就会空出一片空间，空间的长宽与浮动元素长宽相同。总结总结下来，浮动与清除浮动的顺序关系如下设置元素浮动，元素脱离文档流，不计算高度。 本文主要探讨两个问题： 为什么CSS设置浮动会引起父元素塌陷 为什么设置clear:both能清除浮动，并撑开父元素。 起因 CSS的浮动，算是我在写网页时用的最多的属性之一。但...
摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。 作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。 本文主要讨论以下几个问题：1.浮动的原始用途...
摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。 作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。 本文主要讨论以下几个问题：1.浮动的原始用途...
摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...
摘要：布局中有一些概念，一旦你理解了它们，就能真正提高你的布局能力。我们通常有两种方法来解决这个布局问题。是布局中的一个迷你布局你可以将看作是页面内的一个迷你布局。理解浏览器如何布置网页是非常基础的。 CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么...
阅读 3358·2023-04-26 01:40
阅读 3059·2021-11-24 09:39
阅读 1348·2021-10-27 14:19
阅读 2621·2021-10-12 10:11
阅读 1279·2021-09-26 09:47
阅读 1820·2021-09-22 15:21
阅读 2621·2021-09-06 15:00
阅读 851·2021-08-10 09:44
