关于float和position的区别

来源:4-2 侧边栏导航跟随案例

慕雪9296518

2020-02-16 16:48:54

老师好,目前为止到实际操作阶段。我这边积累了一些混淆,其中最大的是float和position的用处区别。我想请问一下老师,1)float和position如果都用于给div内部盒子的定位的话,应该什么时候用哪个比较合适?2)还有从视觉上来看float使用是否不会超过父级div的边框或者会撑开父级元素的高宽,而position则可以超过父级元素高宽的限制,从而到“父级div的外头"?3)同样是脱离文档流,当遇到float和position:absolute共存的时候且位置重合是什么情况?4)如果重合了该怎么让float的元素到position:absolute之上

写回答

1回答

好帮手慕糖

2020-02-16

同学你好,关于你的问题,回答如下:

1、float只是进行浮动,使其在一行显示,不能设置定位。position才是设置定位。若是只让其在一行显示,可以使用浮动float。若是需要设置位置(使用left、bottom、top、right设置位置),或者要覆盖其他元素,要使用定位position。

2、是的,浮动只是使其在一行显示,是不能超出父元素的,但是若父元素的高度很小,浮动的元素比较多,存放必须的时候,高度可能会超出父级的高度,但是宽度不会。

而定位的元素,是可以定任意位置的,所以父元素的宽高都可以超出。

3、共存?是一个元素同时设置浮动与绝对定位,还是设置绝对定位的元素与浮动的元素,在同一位置显示?

若是元素同时设置浮动与绝对定位,这个没有任何影响,具有了两个的特性,可以在一行显示,也可以设置位置与层级。

若是同一位置显示的话,直接调整定位的top、left等,使其覆盖上即可。

4、只有定位的元素能设置层级z-index,向这种情况的话,可以尝试将定位的z-index设置成负数,不过这个会受到元素之间关系的影响,最好还是直接给浮动的元素,也添加一个定位,然后设置层级。

注意:其实这里不需要考虑这么多,一般情况下,使其在一行显示,使用浮动就可以,若是要调整间距,就使用内外边距。

但是要设置位置或者层级,直接使用定位即可。

如果我的回答帮助了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程