在介绍定位和浮动元素之前，我们有必要了解一下文档流。
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）浮动元素的特点：
- 浮动元素会脱离文档流，不会占用文档流中的位置。
- 元素浮动之后，浮动元素下的块元素会自动向上移动。
- 浮动元素只能向左侧或者右侧移动。
- 浮动元素左浮或右浮时不会超过其父元素的边界。
- 浮动元素不会超过其相邻的浮动元素。
- 如果浮动元素上边有块元素，浮动元素不会上移。
- 浮动元素不会覆盖文字,用于文字环绕图片。
2131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
