标准流布局
1.标准流布局（文档流， 普通流，静态流）
是默认的布局方式
特点：将元素按照书写顺序及元素类型，从上至下，从左至右排序
浮动布局
1.设置元素浮动
属性：float
取值：left / right / none(默认值)
2.浮动元素的特点：
1.元素设置浮动（left / right），会脱离文档流，在文档中不在占位，后面正常的元素会向前占位，同时浮动元素会"漂浮"在文档流上方
2.元素设置浮动，会从它当前所在文档中的位置脱流，向左或者向右浮动。
3.多个元素同时左浮或右浮，浮动元素会依次停靠在前一个浮动元素的边缘，中间没有缝隙。
4.浮动元素会在父元素的尺寸范围内浮动，多个浮动元素无法并排显示时，会自动换行。停靠在其他浮动元素边缘。
5.任何元素只要设置浮动，就具有块元素的特征，可以手动调整宽高
3.浮动引发的特殊效果
文字环绕效果：浮动元素脱流，在文档中不占位，后面正常元素会向前占位，可能被浮动元素遮挡。但是浮动元素只会遮挡正常元素的尺寸区域。不会遮挡正常的文本内容。文本会围绕在浮动元素周围显示。
4.浮动元素对父元素高度的影响
子元素如果全部设置浮动，在文档中不占位，父元素高度为0：
1.父元素的背景图片和背景颜色无法显示
2.父元素后面的正常元素会上移，影响布局
解决： 1.为父元素指定高度
2.设置父元素 overflow：hidden；
3.清除浮动效果：
属性：clear
取值：left/right/both
使用：为正常元素添加clear属性，清除浮动元素带来的影响。
left：表示正常元素左边不允许出现浮动元素
right：正常元素不受右浮元素的影响
both：正常元素不受左浮和右浮元素的影响
解决父元素高度为0的问题：
1.为父元素末尾添加空的块元素
2.为空的块元素设置clear：both；
定位布局
1.定位布局的布局：
属性：position
取值：1.static：默认值，使用文档流布局
2.relative：相对定位
3.absolute：绝对定位
4.fixed：固定定位
注意：只有元素设置position属性 relative / absolute / fixed三者之一，才认为元素是“已定位的元素”
2.偏移属性：
使用 top / bottom / left / right 偏移属性调整已定位元素的位置
1.top：取像素值，可正可负。正值表示元素向下移动，负值向上
2.bottom：正值表示向上移动，负值向下
3.left：正值表示元素向右移动，负值表示向左
4.right：正值表示元素向左移动，负值表示向右
3.定位布局的分类：
1.相对定位 position：relative
元素设置相对定位之后，可以使用偏移属性调整元素位置
相对定位的元素是参照元素在文档中的原始位置进行偏移
特点：
相对定位的元素不会脱离文档流，在文档中始终保留它的原始位置。
2.绝对定位 position：absolute
绝对定位的元素会脱离文档流，类似于浮动。
绝对定位的元素参照一个离他最近的已定位的祖先元素进行偏移，如果没有已定位的祖先元素，会参照浏览器窗口（0，0）点进行偏移。
使用：
采用“父相子绝”的方式实现元素绝对定位。
3.固定定位 position：fixed
1. 固定定位可以使元素固定在浏览器窗口的某个位置，不会随网页内容滚动而滚动
2. 语法 ：
属性 ：position
取值 ：fixed
配合偏移属性实现元素位置的固定
3. 注意 ：
1. 固定定位的元素永远是参照浏览器窗口进行定位的
2. 固定定位的元素都会变成块元素