css基础篇（三）——布局（上）float和position

1.定位(position)

position的值有：relative/absolute/fixed/static/inherit;

static:为position属性的默认值，static元素会遵循正常的文档流，且会忽略top,bottom,left,right等属性;

inherit:如同其他css的inherit值，即继承父元素的position值(ie不支持)

下面重点介绍前三个值：

1.1 相对定位(relative)

场景描述（如上图）：第二个div的位置相对自己向下向右移动30px，但是其它div的位置和大小都没有变化;

• 1.相对定位的元素遵循正常的文档流;
• 2.相对定位元素导致自身位置的相对变化，而不会影响其他元素的位置，大小

1.2 绝对定位(absolute)

场景描述(如上图):定位后第二个div脱离文档流，相对于body向右向下移动30px;并且其它元素重新排列;

• 1.绝对定位元素脱离文档流,会影响其它元素的位置，使其它元素从新排列
• 2.绝对定位元素的“包裹性”：定位前第二个div在文档流中的宽度是撑满整个屏幕的（这里因为我给每个div定宽了，所在浏览器中查看元素在文档流中占有的空间，可以不定宽，效果会更加明显），定位后其宽整好是内容的宽
• 3.绝对定位元素设置left,top,right,bottom是相对于包含有position属性的父元素来说的,如果向上查找不到含有position属性的父元素，该绝对定位元素就会相对于window定位;

1.3 固定定位(fixed)

固定定位和绝对定位具有大部分相同的特性,不同之处在于上面说到绝对定位的第三条：固定定位是在任何情况下都是相对于window定位的;

2.浮动(float)

对于float的讲解，张鑫旭讲的float已经非常全面了，此处也是在看完视频后的一个总结

2.1 float最初的作用

在div+css还没有火爆的时候，float主要的作用就是实现文字环绕效果(如上图)

2.2 float的破坏性

>

场景描述：比较图1(图片没有加浮动)和图2(图片加了浮动)发现父元素的高度发生了“坍塌”,这就是float的“破坏性”(究其原因就是设置float的元素脱离了文档流)

2.3 float的包裹性

场景描述：如图在没有设置float的时候,div的宽度会撑满整个屏幕;设置float后，div的宽度会自动调整到包裹起内容的宽度

2.3 清除浮动

flaot有破坏性,但是我们又需要用它，机智的工程师自然会找到更好的解决方案：那就是清除浮动

• • 1.给父元素加浮动(可能你向上加一直加到body,显然是不可取的)
  • 2.为父元素加overflow:hidden;(有些情况下不适用：比如你需要在父元素上定位一个元素显示在父元素的外面尔尔...)
  • 3.clear:both;
  • 4.clearfix:这是目前最为好的解决方案(代码如下：此处就不再上图了，该篇的图似乎有点多)

.clearfix:after{
	content:"";
	display:table;
	clear:both;
}
.clearfix{
	*zoom:1;
}

转载于:https://www.cnblogs.com/zhuz/p/5037472.html