1.流式布局：
流式布局是默认的布局，不给力，从上向下，从左到右进行布局。块级元素的盒子独占一行，行级元素并排显示（如果一行排满了就会自动换行）。流式布局是一套标准的规则。
2.浮动布局:
浮动布局可以让块级元素并排显示（格式：float：left/right/none），如果一个元素浮动了，就相当于“出国了”会对其他元素产生影响：某个元素浮动了，则其父元素里面就相当于没有内容（说的是一个父元素里一个子元素的情况），父元素的高度就变成零了，也就是我们所说的高度塌陷了。我们如果想清除这个影响（就是不让父元素塌陷），可以在父元素里设置：overflow：hidden；overflow的本意就是处理溢出，这个功能算是overflow的“小偏方”。如果一个元素浮动了，那么这个元素内部还是按流式布局进行布局的（也就是说其内部也是一个标准文档流）。
浮动布局的特点：
1.浮动初中是为了实现字围（例如新闻里一张图片周围布满了文字），后面才发现，浮动也有让多个块级元素并排显示的效果。
2.在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流（具有破坏性），后面的元素就会向上排。
3.浮动并没有完全脱离标准流，如果后面的元素内部有文字，这些文字会环绕在浮动元素周围，这就是字围。
4.如果多个元素浮动了，那么他们就会并排显示，如果都是同一个方向的浮动，他们会紧紧的贴在一起。
5.一个元素浮动时：他先上移动，知道贴靠到父元素边界，接着，如果是左浮动，就向左移动，知道移动到父元素的左边界，反之亦然。
6.如果一个元素没有设置高度，他的高度则是由它内部的内容撑起来的。如果父元素里的元素都浮动了则会导致父元素高度塌陷。
7.如果父元素高度塌陷了，我们可以清楚塌陷影响的方法有：1>显示加高度（加高法），给父元素设置height的值。2>使用小偏方（overflow：hidden）。使用了overflow:hidden 父元素的高度会随着子元素的高度变化而变化 overflow:hidden本职工作是用来处理溢出 在使用过程中，需要注意子元素如果想要超出父元素高度， 此时overflow:hidden就不适合了。3> clear:both 在所有子元素后面加一个空的div 在这个div上面加clear:both ---> 内qiang法 优点：clear:both专业清除浮动的 缺点：多写一个代码。
<注>如果父元素也浮动了，那么就不会出现高度塌陷了。
8.元素浮动，对兄弟元素产生的影响：兄弟元素会向上浮动。解决办法：在受影响的元素上面的加 clear:both。
9.项目中最常用清除浮动形成的破坏的方法： 利用伪元素 after 说白了，就是写一个清除浮动产生的破坏的类，如下： .clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;}（很常用）。
10.如果一个元素浮动了，那么他会悄悄做一个变性手术，块级元素变行内元素，行内元素变成块级元素，这样行内元素也可以设置宽高了。
11.当一个块级元素浮动起来了，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住里面的内容，这叫包裹性。如果我对一个块级元素已经设置了width，则不会具备包裹性。
12.如果有左浮动，又有右浮动，那么你需要把右浮动的元素写在左左浮动的前面。
13浮动元素会从半标准流中脱离出来。证明：字围。
14.一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时， 装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时， 里面的浮动的子元素宽度是不会改变的。
特变讲一下overflow的用法：
overflow：溢出
作用：用于处理内容溢出的情况
有如下四种属性值
- visible：表示可见，它是默认值
- hidden：表示隐藏
- scroll：生成一个滚动条
- auto：自动
3.层布局（定位布局）：
在CSS中可以通过position属性定义元素的定位类型：
- static：不定位，元素遵循HTML默认的流动模型，这是默认值。
- relative：相对定位 ：他的参考点是盒子默认应该出现的位置，但是它偏离之后，原来的位置还是被占住了，并没有释放出来。
- { position：relative；
- top：xx；
- left：xx；}
- 它具体偏离多少由：top,right,bottom,left其中的值来决定：
- Top: 表示它要向下移动。
- Right:表示它要向左移动。
- Bottom:表示它要向上移动。
- Left:表示它要向右移动
- absolute：绝对定位：绝对定位会让元素完全脱离标准文档流。它后面的兄弟元素就当它完全不存在，跟float类似。绝对定位是根据参考元素的参考点（即参考元素的左上角）来定位的，参考元素是通过（position：relative；）进行设置的。position:absolute；position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。如果把一个元素设置为绝对定位，则它会悄悄地把这个元素的display改成block。所以就可以设置宽高了。
绝对定位由于它完全脱离了标准文档流，它可能发现覆盖设置了 z-index的情况下，z-index大的在前
- 如何确定一个绝对定位的元素的参考元素？
- 从当前设置为absolute的元素出发，向上一级元素搜索（先找爸爸，再找爷爷，再找 太爷爷…..，直到祖宗：body）。
- 哪一个祖先可以做为它的参考元素呢？满足如下条件之一：
- 祖先元素的position是relative
- 祖先元素的position是absolute
- 祖先元素的position是fixed
- 祖先元素就是body
- fixed：固定定位：与绝对定位类似，但比绝对定位要简单：不需要去确定参考元素。所有固定定位的元素的参考元素都是整个页面。特别适合做固定在侧边的导航效果。
找到参考元素之后，则top:0,left:0就相当于是参考元素的左上角。
