我们在编写网页代码时，首先应该做的就是设计好页面的布局形式，然后再往里面填充内容。网页布局的好与坏，直接决定了网页最终的展示效果。PC端常见的网页布局形式有两列布局、三列布局等。在CSS中，我们通常使用浮动(float)、定位(position)、显示模式(display)相关属性结合使用，以达到预期效果。
一 文档流
文档流就是HTML文档内所有元素按照一定规律排列并显示的形式。
CSS文档流大致可以分为3种：标准流，浮动流，定位流。
1，标准流
默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。总结一下就是，标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。
2，浮动流
浮动流只有一种排版方式, 就是水平排版。 它只能设置某个元素在父元素内左对齐或者右对齐。设置了浮动的元素，将脱离标准流，之后它将无视元素的display属性，并且都被当做块级元素处理。
1 div{
2 float:left;/*规定元素向左浮动*/ 3 /*float:right;规定元素向右浮动*/
4 }
请注意，浮动float属性没有center取值，并且，如果设置了浮动属性，那么你将不能通过使用margin:0 auto；属性使元素居中。
3，定位流
标准流和浮动流都只能在水平或垂直方向布局元素，但现实是，我们可能需要在上下左右几个方向上同时偏移元素，定位流正是为了解决这一问题而设计的。通过设置元素的position属性，可以让元素处于定为流中，并通过left、right、top、bottom属性设置元素具体的偏移量。
定为流分为四种：
a) static 静态定位，实际上所有元素默认都是静态定位的，即处于标准流中。
b) relative 相对定位，元素保留在标准流中所占用的位置，但实际是边框及以内的部分将显示在偏移之后的位置。即虽然元素已经不再原来的位置了，但之前所占用的空间并不会被释放给其他标准流中的元素。
c) absolute 绝对定位，元素脱离标准流，浏览器把它视作块级元素，不论定位之前它是何种元素，其他元素也将无视它。绝对定位的偏移量是相对于其有定位属性的第一个祖先元素的。
d) fixed 固定定位，固定定位和绝对定位相似，但它的偏移量固定的相对于浏览器窗口。
二 浮动
当某个元素浮动之后，相当于从标准流中删除了该元素，标准流中的元素将会无视浮动元素，并且可能被浮动元素覆盖。
当有多个元素浮动时，他们有以下特点：
a) 在相同方向上浮动的元素，先浮动的元素会显示在前面。
1 .brother1{
2 float:left;
3 }
4 .brother2{
5 float:left;
6 }
7 /*brother1将显示在brother2的左边，如果都设置右浮动，那么brother1将显示在brother2的右边*/
b) 不同方向的浮动元素，会尽量去寻找并贴靠前面和它浮动方向相同的元素。如果前面没有其他浮动元素，那么它将紧贴其父元素的边界。
1 .son1{
2 float:left;
3 }
4 .son2{
5 float:right;
6 }
7 .son3{
8 float:left;
9 }
10 /*son1和son3会在父元素的左侧显示，并且son3紧跟在son1的后面。son2则在父元素的右侧显示，紧贴父元素上*/
c) 如果有未浮动的兄弟元素，那么元素在浮动之后，会根据它在标准流中的位置确定该在第几行展示。
1 .brother1{
2 background-color:red;
3 float:left;
4 }
5 .brother2{
6 background-color:blue;
7 }
8 .brother3{
9 background-color:yellow;
10 float:left;
11 }
12 /*最终效果是：brother1和brother2在第一行显示，但brother1盖住了brother2，brother3单独在第二行显示*/
浮动元素还有一个特点：浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置。这才是设计浮动的初衷。
元素浮动后会带来两个问题，第一个是造成父元素的高度塌陷，padding和margin无效。第二个是被其他元素无视，出现元素相互覆盖的现象。那么要怎样才能消除浮动对其他元素的影响呢？我们通过下面的方式清除浮动带来的影响。
a) 为父元素设置固定的高度（解决问题一）。
1 father{
2 heigth:100px;
3 }
4 son{
5 float:left;
6 }
b) 为父元素设置浮动（解决问题一）。
1 father{
2 float:left;
3 }
4 son{
5 float:left;
6 }
c) 设置clear属性。clear属性的功能是使浮动元素不去寻找相邻的其他浮动元素，从而消除浮动元素对其他元素的影响（解决问题二）。
1 father::after{
2 content:'';
3 display:block;
4 height:0;
5 clear:both;
6 }
7 /*俗称隔墙法，根据需要也可以设置在浮动元素自身或其父元素上*/
8 son{
9 float:left;
10 }
d) 为父元素设置overflow:hidden;属性（解决问题二）。
1 father{
2 overflow:hidden;
3 }
4 /*原理是触发BFC机制*/
5 son{
6 float:left;
7 }
三 定位
1，相对定位
通过给元素设置position:relative;属性设置元素相对定位。
1 .box{
2 position:relative;
3 top:50px;
4 left:50px;
5 }
6 /*box元素将在原来的位置向下和向右偏移50px，请注意：在定位流中，同一个方向上的定位属性只能使用一次*/
请注意在浏览器中的坐标系和一般坐标系并不相同。如果不清楚请看《CSS基础》第4.3节。
在相对定位中，实际上元素并未脱离标准流，所以浏览器还是会区分它是否是块级或其他类型的元素。另外，设置元素的margin属性，实际上margin区域会出现在元素定位之前的位置。
2，绝对定位
通过给元素设置position:absolute;属性设置元素绝对定位。
1 .box{
2 position:absolute;
3 top:50px;
4 left:50px;
5 }
6 /*box元素将相对于父元素的左顶点（坐标原点）向下向右偏移50px*/
如果没有设置偏移量，默认top和left偏移量为0。如果元素所有祖先元素都没有定位属性，那么元素将相对body元素偏移。
在使用绝对定位时有两个注意点：第一个是如果网页宽高较大时（大于浏览器可视区宽高），并且元