float 与 position 剪不断理还乱的关系

float:

1、使当前元素div1脱离文档流;

2、影响紧挨着它的后面的div2,使其钻到div1的下面。但是div2中文字不发生变动。(div2不设浮动);

3、要想2个div并排显示,必须都要设置float;

4、如果div2里面的内容还有浮动 , 并排div1和div2,只给div1设浮动 , div2不设浮动

position:

1、相对定位 relative;

2、绝对定位 absolute;使当前元素完全脱离文档流,就像在页面中没有该元素一样,或者说我把它从原来位置拿走了,它后面的元素当它不存在。要想并排显示两个div,外围设relative , div1不变 , div2设absolute , 同时还要设top , 才能实现效果.

原文地址:https://www.cnblogs.com/hellodp/p/5548103.html