文档流

文档流是HTML元素按照书写顺序从上到下，从左到右按照特定规则排列的过程。块元素占据独自的行，行内元素则在一行内从左到右排列，先书写的先排列，后书写的排在后面。每个块元素都占据自己固定的空间位置。

浮动元素有两种类型：左浮动（float:left）和右浮动（float:right）。浮动元素会向左或向右移动，直到碰到父元素边界、浮动元素之间的区域、未浮动的元素或块元素时才停止。相邻的浮动块元素可以并排放置，但如果超出父级宽度则会换行。此外，浮动元素会使其后面或前面未浮动的元素自动转化为行内块元素，从而形成文字饶图的效果。需要注意的是，浮动元素的父级如果也有浮动，则需要使用css clear属性来清除浮动，避免父级被撑开。浮动元素之间的垂直间距不会合并。

常见的清浮动方式

• 在父级元素中设置overflow:hidden属性
• 在最后一个子元素后面添加一个空白div，并为其设置clear:both样式（不建议使用）
• 使用 clearfix类，该类通常定义为：

.clearfix:after,.clearfix(before){content:"";display:table;} .clearfix:after{clear:both;}.clearfix{zoom:1;}

定位类型

• relative（相对定位）：生成相对定位块元素，元素不脱离文档流，相对自身的位置进行偏移
• absolute（绝对定位）：生成绝对定位元素，脱离文档流，可相对已经具有绝对定位或相对定位的父级元素位置进行定位，无父级则相对浏览器窗口定位
• fixed（固定定位）：生成固定定位元素，脱离文档流，相对浏览器窗口定位
• static（静态定位）：默认值，不生成block、inline-block等布局，元素在文档流中的位置不变

• relative 与 absolute 的主要区别是是否脱离文档流
• absolute 是相对最近已定位的父级，如果没有则相对于浏览器窗口
• fixed 是相对浏览器窗口

绝对定位或固定定位的块元素会自动转化为行内块元素，这意味着它们后面或前面未浮动的元素会避开它们形成文字饶图的效果。定位元素不仅脱离文档流，还可以通过z-index属性调整层级，以实现多层次的布局效果。

与其他元素相比，定位元素通常会浮在文档流之上。要实现多层级的定位，可以通过z-index属性进行层级管理，这对于网页多层次布局非常有用。