热搜:NVER node 开发 php

关于CSS中的float和position_html/css_WEB-ITnose

2024-11-15 20:15:02
关于CSS中的float和position_html/css_WEB-ITnose

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

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

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

 

float定位:

 


  • li1

  • li2

  • li3

 

position:relative定位:



  • li1

  • li2

  • li3

 

分别运行,查看一下运行效果。