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

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 style="background: #fff; width: 100%; overflow: hidden;">
<div style="float: left; position: absolute;">我是DIV</div>
<div style="clear: both;"></div>
<div>

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

微信公众号.png 淘宝天猫内部优惠券.png