在CSS 中,用 float 和 position 的区别是什么

2020-05-24 科技 122阅读

CSS布局浮动(float)和定位(position)属性的区别:

1、postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

2、float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。

二者之中最大的差别就是位置保留。

3、同时应用position: absolute和float: left会导致清除浮动无效(position: relative则可以清除浮动)。

常用的清除浮动的方法有两种:

通过在容器中添加一个标签,设置该标签的样式为 clear: both

容器设置overflow: hidden


   
我是DIV

   

效果:

声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com