彻底了解float和position之间的区别
这几天出去面试，顺便整理一下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为左浮动，效果如下
多重随机标签