1、 标准流布局 (现在用得少)

所谓的标准：就是标签按照规定好默认方式排列，标准流是最基本的布局方式

1.1 块级元素

块级元素会独占一行，从上向下顺序排列
常用元素：div,hr,p,h1,ul,ol,form,table

1.2 行内元素

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
常用元素：span,a,i,em等

2、 浮动布局

2.1 浮动特性

1、脱标
(1)脱离标准普通流的控制(浮)移动到指定位置(动)
(2)浮动的盒子不再保留原先的位置
2、如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是相互贴靠在一起的(不会有缝隙，对比inline-block会有缝隙),如果父元素装不下这些浮动的盒子，多出的盒子会另起一行
3、任何元素都可以浮动，不管原先是什么模式，添加浮动之后具有行内元素的相似特性。
如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度；如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定。

2.2 浮动布局注意点

1、浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列到左右位置
2、一个元素浮动了，理论上其余的兄弟也要浮动，以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

2.3 清除浮动

1、由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
2、清除浮动的本质：清除浮动元素造成的影响，清除之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
3、清除浮动的方法
清除浮动本质：清除浮动元素脱离标准流造成的影响
清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
(1)额外标签法(隔墙法)
实际工作中不常用
在浮动元素末尾添加一个空的标签
通俗易懂，书写方便但是添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素
如

overflow:hidden/auto/scroll

优点：代码简洁；缺点：无法显示溢出的部分
(3)父级添加after伪元素
方式是额外标签法的升级版
优点：没有增加标签，结构更简单；缺点：照顾低版本浏览器

.clearfix:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{
	*zoom:1;
}

(4)父级添加双伪元素

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

3、 定位布局

3.1 静态定位 position:static

默认的定位方式，按照标准流摆放

3.2 相对定位 position:relative

1、元素在移动位置的时候，是相对于它原来的位置来说的
2、不脱标，继续保留原来的位置

3.3 绝对定位 position:absolute

1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2、如果祖先元素有定位(相对、绝对、固定)，则以最近一级的有定位的祖先元素为参考点移动位置
3、绝对定位不再占有原先的位置(脱标)
子绝父相：大多数时候因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，因此是绝对定位

3.4 固定定位 position:fixed

1、以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系，不随滚动条滚动
2、固定定位不占有原先的定位

3.5 粘性定位 position:sticky

粘性定位是相对定位和固定定位的组合，跟页面滚动搭配使用，兼容性较差，IE不支持
1、以浏览器的可视窗口为参考点移动元素(固定定位特点)
2、粘性定位占有原先的位置(相对定位特点)
3、必须添加top、left、right、bottom其中一个才有效

3.6 定位的叠放顺序

数字后面不能加单位
只有定位的盒子才有z-index属性

3.7 定位的扩展

1、绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto 水平居中
left:50%;让盒子的左侧移动到父级元素的水平中心位置
margin-left:-××px;让盒子向左移动自身宽度的一半
垂直方向上同理
2、定位的特殊性
绝对定位和固定定位也和浮动类似
行内元素添加绝对或固定定位，可以直接设置宽高
块级元素加绝对定位或固定定位，如果不给宽高，默认大小是内部的大小
3、脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题
4、绝对定位(固定定位)会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，不会压住下面标准流盒子里面的文字(图片)，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素
但绝对定位(固定定位)会完全压住下面标准流的所有内容