彻底了解float和position之间的区别

 我来答 举报
机器1718
2022-06-25 · TA获得超过6848个赞
知道小有建树答主
回答量:2805
采纳率:99%
帮助的人:162万
展开全部
这几天出去面试,顺便整理一下float和position之间的区别

一、float浮动

float会使元素向左或向右移动,其周围的元素也会重新排列(意思就是还是会影响布局),并脱离文档流。

页面中有abcd四个div,设置ac左浮动,结果是什么呢?

当ac左浮动后,脱离文档流,那么bd会按照标准文档流从上到下排列。而a的上一个标准流没有,所以漂浮在左上角,c的上一个标准流元素是b,所以 c从b的底部开始排( 浮动元素总是保证自己的顶部跟上一个标准流元素的底部对齐 )

最后显示的结果是:a浮动挡住了b的一部分,c浮动排在了上一个标准流元素b的后面,而d因为高度比c小,被c浮动元素覆盖了

若你能说出bd浮动是什么结果,说明你就真正理解了什么是浮动。

二、position定位

position:static  默认遵循正常文档流,不受 top, bottom, left, right影响。

position:fixed 脱离文档流,元素的位置相对于浏览器窗口是固定位置。

position:relative 正常文档流,相对定位元素的定位是相对其正常位置。不设置top, bottom, left, right无影响,所以经常被用来作为绝对定位元素的容器块。

position:absolute  脱离文档流,相对于最近的已定位父元素

position:sticky 脱离文档流,CSS3新增有兼容性问题,它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当滚动到屏幕外时则表现如fixed。

三、注意点

1、若同时设置float和position,如果设置相对定位,先浮动,再定位。设置绝对定位,则float不生效。

2、设置float、absolute、fixed会使块级元素变成行内块元素

3、float虽然脱离文档流了,但是还是会影响布局,比如文字环绕,但position不会影响页面布局。

第一张图设置红色div为绝对定位,第二张图设置红色div为左浮动,效果如下
抢首赞 已赞过 已踩过<
你对这个回答的评价是?
评论 举报 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式