css浮动、定位到底什么鬼？

css操作元素位置有以下几种方式：float、position、top等。

 

I float part

1.浮动首先会先将元素在正常文档流中删除，父容器无法获取元素高度，但是该元素依然影响布局。

2.任何元素被浮动后先生成一个块级框，然后为自己指定一个包含块。

3.浮动元素与正常元素重叠时，行内框自行置顶，块框只有内容置顶。

4.定位属性强于浮动属性。

5.clear清除是产生一个清除域，加在上外边距之外，域中不允许浮动元素的存在。

 

II position part

1.relative、static、absolute、fixed四种定位的定义比较简单，略过。

2.固定定位（fixed）与绝对定位（absloute）基本一样，只是fixed的包含块是视窗。

3.absolute定位元素自动将最近的一个relative定位的包含块作为父元素。

 

III top·· part

1.top等的偏移定义了浮动元素距离其包含块对应边的偏移。

2.除了bottom之外，设为auto的偏移项会相对于元素的静态位置定位。

3.左右外边距都是auto，但left、right、width不是auto。元素会保持绝对居中。

4.相对定位一个元素，它的子元素会拥有一个处于它本来所在位置的一个包含块。

转载于:https://www.cnblogs.com/mingtan/p/5793931.html