关于float属性的一些理解

float属性

每次写前端页面浮动的时候,也搞不懂程序到底是怎么执行的,经常就靠着反复尝试来实现效果,效率很低,所以就在这总结一下float属性到底是怎么运作的,遵循着哪些基本的原则。

一 简介

在CSS中,有三种方式可以脱离文档流(float,absolute,fixed),float就是其中的一种。它会使得元素漂浮起来了一样。

二 遵循的规则

既然元素漂浮了起来,那它是怎么漂的呢?
首先,我们先看这样一个特点:所谓是”漂浮“,从网页的角度看,是在Z轴上漂的。举一个例子:
在这里插入图片描述
现在对div3设置一个左浮,运行之后其实页面并没有发生变化,还是上图的样子,而我有一个朋友问过我,为什么div3这里虽然浮起来了,但不往上面跑(也就是跑到最顶端,覆盖div1)。这里就是对”漂浮“有一个比较想当然的误区——认为东西浮起来,也就是脱离文档流以后,会像标准流一样尽力以后是很轻的,会往左往上。而实际上浮动元素的位置,是由其它东西决定,这个我们后面会提到。

还是上面那个网页,如果我们只对div2设置左浮动,div3就会占据div2的位置(如下图)——因为div2浮起来后不再占据标准流。而在标准流中,元素还是会默认向上靠近的,所以div3就顶上来,占据了原来div2的位置。也就是说,div3的“消失”,是“藏”在了div2下方。
在这里插入图片描述
其次,当有多个浮动元素的时候,他们的排列遵循着怎样的规则呢?
其实总结起来简单,要浮动的元素,会去查找前一个元素(注意,这里是就是直接找前一个元素,不需要它是浮动元素),然后看这个元素的盒模型的顶边够不够放下我们将要浮动的元素,如果不够,就往下平移,直到能放下为止,然后在能放下的那条线上,我们将要浮动的元素,会尽可能得向它要浮动的方向贴近。举个例子:

这是页面原本的样子(div1左浮动,div2右浮动)
页面原本的样子
①查找上一个元素的顶边,并尝试把自己放进去(这里上一个元素就是div2,并尝试了如图的位置。而结果,很明显是放不下去的)
在这里插入图片描述
②向下一直平移,直到有空间可以容纳自己
在这里插入图片描述
③找到了能容纳自己的那条水平线,然后尽力向自己设置的浮动方向浮动(这里就是尽力向左,直到碰到边缘或其他元素)
在这里插入图片描述

总结

可以想象成,一个元素漂浮起来后,就会去到它应该在的位置作比较,如果该位置不能容纳,它就会就地下移”一帧“,直到可以容纳为止。然后再尽力向它设置的浮动方向左右平移。

如果有语句不通、难以理解或者错误的地方,欢迎指正,感激不尽。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值