##页面布局
布局（layout）即对事物的全面规划和安排，页面布局是对页面的文字、图像或表格进行格式化版式排列。在 HTML 中，常使用 div 元素来创建多列，使用 CSS 对元素进行浮动、定位等，从而将网页设计稿中的布局样式呈现在网页上。网页布局是网页制作的基础，通常使用的方式有三中：流式布局，即元素按照标准文档流进行排列；浮动布局和绝对定位布局。而在各大网站中，常见的布局结构分为：一列布局，两列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照网站的实际需求使用多列进行布局。
##浮动 在 CSS 中，我们通过 float 属性实现元素的浮动。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
在 CSS 中，我们通过 float 属性实现元素的浮动。
-
float可选值
-
none 默认值，不浮动，元素在文档流中
-
left 元素向左浮动
-
right 元素向右浮动
浮动以后元素的特点
-
元素浮动以后，会使其完全脱离文档流。
-
块元素块，元素脱离文档流以后，不会独占一行，宽度和高度都被内容撑开
-
内联元素，内联元素脱离文档流以后会变成块元素
##高度塌陷的问题 父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱
解决高度塌陷的方法：
-
方法一：开启父元素的BFC或hasLayout
-
方法二：在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动
-
方法三：使用after伪类，向父元素后添加一个块元素，并对其清除浮动
##定位 通过定位可以将页面中的元素，摆放到页面的任意位置
使用position来设置元素的定位
-
static 默认值，元素没有开启定位
-
relative 开启元素的相对定位
-
absolute 开启元素的绝对定位
-
fixed 开启元素的固定定位
####定位方式 #####相对定位
-
1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化
-
2.相对定位元素相对于其自身在文档流中的位置来定位
-
3.相对定位的元素不会脱离文档流
-
4.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素
-
5.相对定位的元素会提升一个层级
####绝对定位
-
1.元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
-
2.绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。
-
3.绝对定位的元素会完全脱离文档流
-
4.绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行
-
5.绝对定位会使元素提升一个层级
####固定定位
-
固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样
-
不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。并且他不会随滚动条滚动
###层级 定位元素 > 浮动元素 > 文档流中的元素，z-index值越高元素越优先显示，如果z-index值一样，或者都没有z-index则优先显示下边的元素，父元素永远不会盖住子元素
###偏移量 当元素开启了定位以后，可以通过偏移量来设置元素的位置
