CSS 传统网页布局三种方式（PC端）※

1、标准流（普通流、文档流）

按照标签规定好的默认方式排列。

1.1 块元素独占一行，从上向下
常用元素：div、hr、p、h1~6、ul、ol、dl、form、table

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

2、浮动（float）

多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动 ※

2.1 语法
选择器{float:属性值;}

2.2 特性（重难点）

• 浮动元素会脱离标准流（托标），位置不保留；
• 如果多个盒子都设置了浮动，则她们会按照属性值一行内显示，并且顶端对齐排列；
• 浮动元素会具有行内快元素特性。

2.3 技巧
1）常与标准流父级搭配使用
为了约束浮动元素位置，一般先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

2）若同样式一行排列，可用 li 浮动。（注意权重问题）

2.4 清除浮动（clear）

原因：父元素往往不能固定高度，而子元素float之后，父元素又没有高度，会出问题。
语法：选择器{clear:属性值;} //left、right、both（常用）
方法：
1）隔离法，W3C推荐做法（额外标签法）
在浮动元素末尾添加一个空的标签，如

//必须为块元素或

2）给自己添加overflow（父元素）
overflow:hidden;
缺点：无法显示溢出的部分。

3）after伪元素法（父元素）

 

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

.clearfix{
	/*IE6、7专有*/
	*zoom:1;
}

4）双伪元素法（父元素）

<div class=“box clearfix”> </div>

.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}

.clearfix:after{
	clear:both;
}

.clearfix{
	*zoom:1;
}

3、定位（position）

3.1 静态定位（static）
无定位，标准流特性。

3.2 相对定位（relative） ※
相对自身原来位置定位，移动后位置保留（占位）。

3.3 绝对定位（absolute） ※
相对祖先元素来定位

• 如果没有祖先元素或祖先元素没有定位，则以浏览器为准；
• 如果祖先元素有定位（相对、决定、固定），则以最近一级的有定位祖先元素为参考点移动位置；
• 绝对定位不占原先位置。

3.4 固定定位（fix）※

• 以浏览器的可视窗口为参照点移动元素；
• 跟父元素无关；
• 不占位。

小技巧：置顶按钮的实现。

3.5 粘性定位（sticky）

• 以浏览器可视窗口为参照点移动元素（固定定位特点）；
• 粘性定位占有原先的位置（相对定位特点）；
• 必须添加top、left、right、bottom其中一个才有效；

应用场景：顶部的导航栏（IE不支持）

3.6 定位的叠放顺序（z-index）

• 数值可以是正数、负数或0，默认是auto（后来居上），数值越大，盒子越靠上；
• 只有定位的盒子才有该属性；（标准流和浮动无）

3.7 定位拓展

1）绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin: 0 auto 水平居中。

position:absolute;
left:50%;
margin-left: -子元素自身宽度一半 px;

2）属性变化
行内元素添加绝对定位或固定定位，可以直接设置高度和宽度；
块元素添加绝对定位或固定定位，如果不给宽度、高度，默认大小是内容的大小（不占一行）；

3）脱标的盒子不会引起外边框合并问题；

4）绝对、固定定位会完全压住盒子
浮动元素只会压住下面标准流的盒子，但不会压住下面标准流盒子里面的文字或图片，但绝对、固定定位是完全压住。
浮动最初的目的是做文字环绕效果。

3.8 总结