在介绍定位和浮动元素之前,我们有必要了解一下文档流。
1、文档流与脱离文档流
1)文档流:css把网页分为了很多层,文档流为网页的基层,如果不设置一些特殊属性,所有的网页元素都在文档流中。
2)元素脱离文档流:元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
元素脱离文档流的特点:
- 块元素:块元素脱离文档流后,不会独占一行,如果未给元素设置宽高,默认宽高被内容撑开。
- 行内元素:效果和脱离文档流的块元素一样。
2、元素的定位
1)Static(默认值,静止定位)
这个是元素的默认定位方式,会占据正常的空间,处于文档流之中,并且忽略“left”等属性是产生的任何效果。
2)Relative(相对定位)
相对定位的方式。相对于自身在文档流中所处的位置来进行定位,参照物为自身,仍处于文档流中,原先占有的空间仍保留(一般用作改变层级和作为绝对定位的参照物)。
3)Absolute(绝对定位)
①当元素设置绝对定位后,没有设置偏移量,元素不会有任何变化。
- 如果当前元素没有祖先元素,就参照于根元素<html>进行定位。
- 如果当前元素有祖先元素,就参照于最近一个开启了定位的祖先元素。
②当元素设置绝对定位后,元素会脱离文档流,不占用文档流的位置。
4)Fixed(固定布局)
固定布局是脱离文档流的,默认宽度为内容的宽度,参照物为浏览器窗口,其特性和absolute是相同的,当然,如果给头部定义了一个固定布局,头部则不会随着滚动条移动了(如百度的搜索框)。元素的位置通过“top”,”bottom”,”right”,”left”属性进行定位。
3、浮动(float)
浮动用于元素“水平”方向的布局。多应用于网页菜单。
1)可选值:
- none:默认值,不开启浮动
- left:元素向左浮动
- right:元素向右浮动
2)浮动元素的特点:
- 浮动元素会脱离文档流,不会占用文档流中的位置。
- 元素浮动之后,浮动元素下的块元素会自动向上移动。
- 浮动元素只能向左侧或者右侧移动。
- 浮动元素左浮或右浮时不会超过其父元素的边界。
- 浮动元素不会超过其相邻的浮动元素。
- 如果浮动元素上边有块元素,浮动元素不会上移。
- 浮动元素不会覆盖文字,用于文字环绕图片。