在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。

一、定位与浮动

不同类型元素的特点你们理解嘛？我们可以随便的排列组合他们来达到我们想要的效果。但是他们都是基于一个二维平面的，假如我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要用到定位和浮动的相关知识。喜欢小编的伙伴可以从评论区一起探讨学习！

1 文档流

文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序进行排列。那么也即可以了解成我们刚才所说的一个二维平面的概念。

那么假如我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们即可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。

1.2 包含块

包含块就是个专有名词，其实概念很简单，这里理解一下就好。

包含块是一个矩形区域，当元素设置属性的百分比的时候，比方width：50% 或者者 top: 10%，其参考系就是他的包含块。

大部分时候对于文档流里的元素，其包含块指的都是其父元素的区域。

对于定位元从来说，相对定位元素包含块也是其父元素区域；

绝对定位元素的包含块是其带有position为非static的祖先元素区域。假如其没有这样的祖先元素的话其包含块为首屏显示区域，这个区域也有个专有名词叫做初级包含块。

固定定位元素的包含块就是当前可视区的区域。

1.3 定位

定位允许你用 position 属性，将一个元素相对于他自己或者者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属性进行偏移。

根据 position 属性的取值，元素可以分为静态定位元素static（默认值）、相对定位元素relative、绝对定位元素absoute和固定定位元素fixed。

首先我们抛开static这个默认值，由于他基本不属于定位的范畴，由于元素默认就是static，他就相当于是依据文档流显示。

当我们用定位时，需要position属性和top,left,right,bottom这两类属性共同参加来决定一个元素的 定位类型 和 偏移量 。

用方法很简单，这里说下他们之间的区别:

relative相对定位

元素根据其在当前文档流所在位置作为参考系，进行偏移。

定位之后原来元素在文档流中的位置会被空出来，不会被其余元素所占据。

absolute绝对定位

元素会将其带有position为非static的祖先元素作为参考系进行偏移。

假如祖先元素里没有带有position为非static的，则会以首屏作为参考系。

定位后，原来在文档流中占据的位置，会被其余元素所占据。

fixed固定定位

根据当前可视区进行定位，所以当文档流为多屏可滚动时，fixed定位的元素会跟随滚动而滚动。

跟absolute定位一样，定位后，原来在文档流中占据的位置，会被其余元素所占据。

1.4 浮动

浮动允许你将元素浮动起来，脱离文档流向左或者者向右移动。直到它的外边缘碰到包含框或者另一个浮动框的边框为止。

尽管浮动也脱离文档流显示，但是与定位不同的是 inline 和 inline-block 的元素可以识别这种因浮动而脱离的文档流，从而不发生重叠。

* {

margin: 0;

padding: 0;

}

.float {

width: 40px;

height: 40px;

background: blue;

float: left;

}

p{

display: inline-block;

width: 100px;

height: 100px;

background: red;

}