CSS布局浮动(float)和定位(position)属性的区别和如何使用

html-css010

CSS布局浮动(float)和定位(position)属性的区别和如何使用,第1张

float: left|right可以自动排列自动折行, 但需要clear来配合清除浮动display: inline-block 有些时候可以替代float实现相同的效果.

position: absolute|relative要配合top,left等定位

position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index。PS的图层效果就是position: absolute。

float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并可能导致换行。图片的文字环绕布局效果就是float。

display的inline-block不脱离文档流,将block元素当作大型字符嵌入文档流内,类似于img或者input默认效果。

3中的解释当然是错误的了。

这句中说的是绝对定位中元素排列位置的方式。

-------

2、假如浮动元素在非浮动块元素之前,则非浮动块元素内容将会显示浮动块元素行后。

简单的就是说,非浮动元素会绕着浮动元素,这也是实现环绕效果的基本。

------

3、在浮动元素之后的非浮动块元素会无视该浮动元素的存在(怎么可能会无视浮动元素的存在呢?),显示在与浮动元素开始的位置,浮动元素显示在非浮动块元素之上(因为没有无视,所以非浮动元素不会显示在浮动元素的开始位置)。

这句换成:

3、在 绝对定位 元素之后的 非定位 元素会无视该 绝对定位 元素的存在,显示在与 绝对定位 元素开始的位置, 绝对定位 元素显示在 非定位 元素之上。

以上……

就是这样。