dispaly、position、float之间的关系与相互作用

 

 

1、display介绍：

几个常用的属性

　　none:此元素不会被显示。

　　block:此元素将显示为块级元素，此元素前后会带有换行符。类似于div,能够设置宽高等属性

　　inline:默认。此元素会被显示为内联元素，元素前后没有换行符,类似于text，不能设置宽高等属性

　　inline-block：行内块元素，元素前后没有换行符,可以设置宽高等属性

2、float介绍

几个常用属性：

left：元素向左浮动。相对于原位置进行浮动;会脱离父文档区

right:元素向右浮动。相对于原位置进行浮动;会脱离父文档区

none：默认值。元素不浮动，并会显示在其在文本中出现的位置

3、position介绍：

 https://www.cnblogs.com/xiaoye2018/articles/10628884.html

float与position的关系：

float是相对自己原来（即不使用float时文档的位置）的位置来进行创建文档区浮动的！而postion的absolut是根据上一非static元素来进行定位的；这两者尽量不要在同一元素中使用！

也就是这个原因，所以clear:both能够清除float的浮动，而不能清除postion的浮动！因为float的浮动清除后可以回到原文档位置，而postion的浮动清除后，位置不好确定；

注意：浮动都是脱离了原文档区（即父文档区），不占用父文档区内容区域