css浮动的理解

css浮动的理解

什么是“浮动”

概念

浮动是指的是css的属性float。对于设置了浮动的元素，在页面效果上可以通俗的理解为“这个元素漂起来了（在水上）”，位置发生变化，不按HTML代码中排列。从定义上理解，即该元素脱离了文档流（常规流）。

以下是MDN web docs中关于浮动的描述：

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

效果

从两张图片简单的看以下浮动的效果：

1. a在容器中是块级元素，占据一整行的位置（父级的全部宽度），后续的文字排列在其下方。

1. 给a添加上float: left;，后续的文字紧跟a排列。

浮动对布局的影响

从上面的图片例子直观的了解了浮动后，我们来仔细看看，浮动对于布局的影响。

浮动元素对兄弟元素的影响：

1. 当兄弟元素是块级元素，浮动元素不会影响其布局。

块a浮动后，块b仍然占据一整行。视觉上，即块a浮到了块b的上一层。

1. 当兄弟元素是行内元素，它的布局会收到浮动元素的影响。

将“float CSS”放在span标签中，发现其位置和后续的文本一样，被浮动的块a“顶开了”。

浮动元素对父级元素的影响

1. 当父级元素是行内元素，浮动效果如下：

产生了和兄弟行内元素一样的效果。

所以，在使用浮动的时候，父级元素一般不要使用行内元素，避免造成不必要的麻烦。

1. 当父级元素是块级元素。我们先看没有浮动的情况：

对比加了浮动之后，

很明显的能发现，浮动元素对于父级最大的影响在于，不能“撑开”父级元素。

浮动元素之间的影响

对于多个浮动元素（浮动方向一致），在布局上就是单纯的按照元素在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来实现，但浮动运用依旧广泛。具体就要看我们在开发过程中的需求和自己的选择了。

再讲两句

在梳理这些知识之前，虽说知道了浮动是怎么回事，但始终没有把它统一的归纳起来，自己捋一遍，才发觉其中确实有一些值得好好推敲的细节。能力和经验有限，理解不一定能准确到位，在网上看了相关的资料和视频后，决定写下这篇文章，看看自己是不是真的理解了这个东西。
关于浮动，后续会总结以下消除浮动影响的相关内容。