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来实现,但浮动运用依旧广泛。具体就要看我们在开发过程中的需求和自己的选择了。

再讲两句

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

posted @ 2020-06-09 16:18  10年码农  阅读(657)  评论(0编辑  收藏  举报